Problem/Motivation
When embedding an image file, it's possible to set alt text and title to be used for that specific embed. These are normally supposed to be saved as alt and title attributes on the drupal-entity tag. However, they're not being saved because the CKEditor plugin which defines the drupal-entity tag does not allow alt and title attributes on the tag, and core's filter for allowed HTML tags rejects them by default too.
Steps to reproduce
- Install Drupal with the Standard profile.
- Install the Media and Entity Embed modules.
- Create a new embed button with these options:
- Embed type: Entity
- Entity type: File
- Allowed display plugins: Image
- Add this button to your default CKEditor text format (in Standard, this will probably be Basic HTML). Also ensure that the "Display embedded entities" filter is enabled and allows the
drupal-entitytag and its data attributes (which, by default, it should). - Create and save a new Image media item.
- Create a new node that uses the default text format for its body field. Click the new embed button you created and enter part of the uploaded image's file name to embed it. You should see options, in the embed dialog, to enter alt text and title. So do that, and click Embed.
- You should see the image embedded in CKEditor. However, if you view the source code of the editor, you'll see that the
drupal-entitytag does not have the alt text or title you set. - If you save the node and view the embedded image, you'll see that it doesn't have the alt text or title either. It's just totally thrown out.
Proposed resolution
Allow the drupal-entity tag to include alt and title attributes, and be sure those are respected when the embedded entity is rendered out, and also editable when modifying an embed.
Remaining tasks
Write an update path, since this requires changes to existing input filters. Then test and commit the patch.
User interface changes
None.
API changes
None.
Data model changes
None.
Release notes snippet
Fixed a bug where embedded images would throw out alt or title text under certain circumstances.
| Comment | File | Size | Author |
|---|---|---|---|
| #23 | make sure you have alt and title on drupal-entity.png | 144.13 KB | oknate |
| #9 | 2834112-8.patch | 1.23 KB | wim leers |
Comments
Comment #2
keesje commentedprobably related to:
https://www.drupal.org/node/2749695
https://www.drupal.org/node/2798251
Comment #3
louisnagtegaal commentedHello,
I was (apparently) having the same problem but was able to solve by editing the settings on:
/admin/config/content/formats/manage/restricted_html
for
Limit allowed HTML tags and correct faulty HTML
The default for a Drupal entity there is:
<drupal-entity data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-align data-caption data-embed-button>I added to this 'title' and 'alt':
<drupal-entity data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-align data-caption data-embed-button alt title>Now both title and alt field are correctly saved.
Comment #4
axroth commented+1, confirm the fix mentioned by louisnagtegaal
Comment #5
stevenx commentedyes, I can confirm this works. Thanks!
Comment #6
marcoscanoComment #7
phenaproxima+1. I ran into this as well (under slightly different circumstances) and can confirm that the fix in #3 works.
Comment #8
phenaproximaThis should probably be documented somewhere.
Comment #9
wim leersThis should fix it; this should perform #3 automatically during installation. Please do manual testing to confirm. Afterwards, I'll add an update path for all existing formats that are using
entity_embed's filter.But … does it really make sense to have
altandtitleon<drupal-entity>tags? What's the use case?Comment #10
wim leersI don't see how Paragraphs is relevant here.
Comment #11
wim leersComment #13
wim leersThose 3 fails are the 3 known ones in HEAD. This patch is fine.
Comment #14
phenaproximaRe-tagging, and will test manually.
Comment #15
phenaproximaOops, didn't mean to go RTBC just yet.
Comment #16
phenaproximaI confirmed that this fix works as advertised, and am updating the IS with steps to reproduce, so others can also test this. Kicking back to "needs work" since this will need an update path.
I'm also tagging this as an accessibility issue, and escalating it to Major, since this bug means you can't have alt or title text attached to embedded images.
Comment #17
phenaproximaForgot to change status.
Comment #18
wim leersThanks for the manual testing!
Update path is trivial. But, first I want to make sure this issue actually makes sense:
(That's quoting myself from #9.)
Comment #19
wim leersOkay, so apparently this only applies to the
@EntityEmbedDisplay=imageplugin, which only works for theimagefield type.So, this only benefits you and you only need this and you can actually only enter these attributes if:
fileentitiesimageMIME typeComment #20
wim leersGiven this only affects
Fileentities, not any other entity type, I'm demoting this.Comment #21
phenaproxima@Wim Leers: You grok it in fullness, and I'm okay with the priority change.
Comment #22
wim leersComment #23
oknateThis was fixed and test coverage added in #3022768: Validate that `alt` and `title` are required attributes for `<drupal-entity>`, and ensure they're added by default.
I don't think there's anything else to do here.
When a site builder sets up a filter format and enables "Limit allowed HTML tags and correct faulty HTML", he/she must be sure to include "alt" and "title" within the drupal-entity element in the "Allowed HTML tags" field:
We now have validation for that and test coverage.
Comment #24
wim leers🥳