Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
When using the EPT Title Field for a container/column, the field uses a WYSYWIG editor, but this causes the text to automatically be wrapped in a paragraph which would result in a <p> within an <h2> (since the template file already outputs the title within an h2 by default).
<h2>
<div class="clearfix text-formatted field field--name-field-ept-title field--type-text-long field--label-hidden field__item">
<p>Explore CMS</p>
</div>
</h2>
This probably isn't good semantically in HTML.
Steps to reproduce
Create a new EPT container and add some text in the Title field.
Proposed resolution
Perhaps it might be best to have the title as a plain text field. That way when it gets output in the paragraph--ept-columns--default.html.twig template. it will just appear as plain text in the h2 instead of a paragraph within the h2.
Remaining tasks
N/A
User interface changes
Switch from a WYSIWYG editor to plain text field.
API changes
N/A
Data model changes
N/A
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | 79dc91e76a58166b3ffb2937a976d240.png | 41.6 KB | levmyshkin |
| #9 | 34bf1290f56de602512fe26dd5893e5c.png | 35.15 KB | levmyshkin |
| #9 | 94eb989966acd243a7c529ffee9fd18f.png | 21.59 KB | levmyshkin |
| #6 | 3460287_4_fix.patch | 643 bytes | rohitsharma401 |
| #4 | Screenshot 2024-07-10 at 8.02.33 AM.png | 24.32 KB | axle_foley00 |
Comments
Comment #2
axle_foley00 commentedComment #3
levmyshkinHi axle_foley00, I thought a lot about how to achive titles with ability to add formatting, links, small images, etc. And keep it semantically good. I thought to use Fences module and make it sematically better:
https://www.drupal.org/project/fences
But then fields configs became too big and complicated, installation EBT/EPT modules will affect on other content types, paragraph types and block types, because Fences will be everywhere. I refused an idea to use Fences, but it's still possible to use it for any EBT/EPT modules.
I also thought to remove hardcoded
<h2>tags from templates, and add<h2>tags in CKEditor as Header style. I used this approach on few commercial projects and it's working fine. But it's not obvious for regular editors, why Title field is not becoming<h2>automatically.Also I thougt to use Fences modules to set field wrapper H2 tag, but sometimes it's needed to use H3 or H4 tags instead for block titles.
I can add additional settings field Title Tag checkbox or select list with H2, H3, H4, None, options and display title tag based on this option.
If you have any ideas, feel free to share them. I will be glad to hear any feedback.
Comment #4
axle_foley00 commentedHey @levmyshkin,
Okay I understand your motivation now for having things the way they currently are. The use case of being able to quickly add an image/icon with the Title is a useful one. I had a project that required something like that but I just decided to add those icons beside the titles as a background image using CSS.
I do agree that ideally we wouldn't want to make the configs too big and complicated.
I'm wondering if adding an option similar to the Style settings in Views could work. So as you said, have the select list with the options H2, H3, H4, None, etc.. and then display based on that.
Comment #5
rohitsharma401 commentedI will add a patch file for this.
Comment #6
rohitsharma401 commentedi have done this directly in the Twig template where in the title field at the time of rendering .
Comment #7
levmyshkinHi rohitsharma401, thank you for your patch, but we need to solve another problem, we should avoid
<div>tags inside<h2>tags.Here is a discussion about removing extra divs:
https://www.drupal.org/forum/support/theme-development/2022-07-27/fixed-...
And even here is potential problems with Quick editing, possibly for Mercury Editor too:
https://www.drupal.org/project/mercury_editor
https://www.drupal.org/project/quickedit
Looks promising by the way, quick editing is needed only for editors and Google will not see page with additional
<div>wrappers for quick editing.Comment #9
levmyshkinHi axle_foley00, I added new Title Options for EPT settings:
It's going to strip tags by default and show only h2 tag (optionally too). You will need to update EPT Core, EPT Columns and re-save EPT paragraphs on your site.
It's still possible to use
<br>,<img>,<i>,<span>for settings styles and multiple lines for title.I will update all other EPT modules eventually too.
Comment #10
levmyshkinComment #11
levmyshkinComment #12
levmyshkinAdded new releases:
https://www.drupal.org/project/ept_columns/releases/1.4.5
https://www.drupal.org/project/ept_core/releases/1.4.12
Comment #13
levmyshkinBy the way, it will brake Quick Editing, but I'm good for now with this solution, since Mercury is not working with CKEditor 5, it's not usable for now.
Comment #14
axle_foley00 commented@levmyshkin and @rohitsharma401, okay great thanks! I'll update the modules in my install to get the new changes.
Update: I tried it and it works! Thanks again.