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

  1. Install Drupal with the Standard profile.
  2. Install the Media and Entity Embed modules.
  3. Create a new embed button with these options:
    • Embed type: Entity
    • Entity type: File
    • Allowed display plugins: Image
  4. 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-entity tag and its data attributes (which, by default, it should).
  5. Create and save a new Image media item.
  6. 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.
  7. You should see the image embedded in CKEditor. However, if you view the source code of the editor, you'll see that the drupal-entity tag does not have the alt text or title you set.
  8. 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.

Comments

n8tron created an issue. See original summary.

keesje’s picture

louisnagtegaal’s picture

Hello,

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.

axroth’s picture

+1, confirm the fix mentioned by louisnagtegaal

stevenx’s picture

yes, I can confirm this works. Thanks!

marcoscano’s picture

Issue tags: +D8Media
phenaproxima’s picture

+1. I ran into this as well (under slightly different circumstances) and can confirm that the fix in #3 works.

phenaproxima’s picture

Issue tags: +Documentation

This should probably be documented somewhere.

wim leers’s picture

Status: Active » Needs review
Issue tags: +Media Initiative, +JavaScript, +Needs manual testing
StatusFileSize
new1.23 KB

This 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 alt and title on <drupal-entity> tags? What's the use case?

wim leers’s picture

Title: Alt and Title Attributes not saving in WYSIWYG inside of paragraphs » Alt and Title Attributes not saving in CKEditor

I don't see how Paragraphs is relevant here.

wim leers’s picture

Title: Alt and Title Attributes not saving in CKEditor » `alt` and `title` attributes not saving in CKEditor

Status: Needs review » Needs work

The last submitted patch, 9: 2834112-8.patch, failed testing. View results

wim leers’s picture

Status: Needs work » Needs review

Those 3 fails are the 3 known ones in HEAD. This patch is fine.

phenaproxima’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: -D8Media

Re-tagging, and will test manually.

phenaproxima’s picture

Status: Reviewed & tested by the community » Needs review

Oops, didn't mean to go RTBC just yet.

phenaproxima’s picture

Priority: Normal » Major
Issue summary: View changes
Issue tags: +Accessibility

I 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.

phenaproxima’s picture

Status: Needs review » Needs work

Forgot to change status.

wim leers’s picture

Title: `alt` and `title` attributes not saving in CKEditor » `alt` and `title` attributes not saving in CKEditor, because they're not automatically whitelisted in the "HTML" filter
Issue tags: -Needs manual testing +Needs update path

Thanks for the manual testing!

Update path is trivial. But, first I want to make sure this issue actually makes sense:

But … does it really make sense to have alt and title on <drupal-entity> tags? What's the use case?

(That's quoting myself from #9.)

wim leers’s picture

Title: `alt` and `title` attributes not saving in CKEditor, because they're not automatically whitelisted in the "HTML" filter » [file entities] @EntityEmbedDisplay=image's `alt` and `title` attributes not saving in CKEditor

Okay, so apparently this only applies to the @EntityEmbedDisplay=image plugin, which only works for the image field type.

So, this only benefits you and you only need this and you can actually only enter these attributes if:

  1. you're embedding file entities
  2. that happen to be of the image MIME type
  3. and you select this particular "entity embed display plugin"
wim leers’s picture

Priority: Major » Normal

Given this only affects File entities, not any other entity type, I'm demoting this.

phenaproxima’s picture

@Wim Leers: You grok it in fullness, and I'm okay with the priority change.

wim leers’s picture

Title: [file entities] @EntityEmbedDisplay=image's `alt` and `title` attributes not saving in CKEditor » [file entities] @EntityEmbedDisplay=image plugin's `alt` and `title` attributes not saving in CKEditor
oknate’s picture

Status: Needs work » Closed (outdated)
StatusFileSize
new144.13 KB

This 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:

make sure to include alt and title in drupal-entity element

We now have validation for that and test coverage.

wim leers’s picture

🥳