Problem/Motivation

In #3247795-61: Add text filter plugin to support <img loading="lazy"> and remove it from editor_file_reference (and elsewhere in that issue) it was asked how to essentially override whatever the media view mode configuration says to do for loading of an image. If the image or responsive image field formatter is configured to render as eager or lazy, we might still want to override that setting in CKEditor.

<drupal-media> is embedding media (which might contain an image, but isn't just the image), with a defined view mode.

The media display mode configuration will include whether the image is rendered lazily or not (responsive image formatter still needs #2947796: Responsive image format for media.

If we do this issue and the others, but no specific follow-up, then it looks like this:

- If you add an image directly in the editor, you either specify the loading attribute, or this filter makes it lazy if nothing is specified.
- If you add an image via media embed, the media view display configuration determines the loading attribute

The responsibility for the loading attribute (and everything else about how the embedded media is displayed) is therefore on the media display configuration. This means that care needs to be taken about where any particular media view mode is likely to be used, since it may or may not appear above or below the fold, but that is the case for non-editor media references too.

There seem to be a couple of other options:

1. Make this filter apply the same change to images rendered via media embed too - however since every image rendered via media view mode will have a loading attribute of either lazy or eager, it would be a no-op.

2. Add configuration on media embed to specify the loading attribute , as mentioned in #3247795-21: Add text filter plugin to support Only local images are allowed. and remove it from editor_file_reference, this would have to rewrite the rendered media entity HTML to override the attribute.

3. Take an approach closer to #2947796: Responsive image format for media thumbnails: allow the media reference to show media as a 'thumbnail' instead of with a view mode, and then make the image style/responsive image style and loading attribute configurable directly in the editor or something like that. This would have to be an option in the media embed widget in that case, although that allows the loading attribute to be unspecified, then this filter could then kick in on those images.

Option #2. seems possible, but counter-intuitive to have the rendered entity HTML rewritten by the filter.

Option #3 seems like it might be viable, although it adds a lot of options and complexity to the media embed widget.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Comments

heddn created an issue. See original summary.

wim leers’s picture

Title: Handle overriding loading attribute in ckeditor » Handle overriding loading attribute in CKEditor
Status: Active » Postponed (maintainer needs more info)
Issue tags: +Needs issue summary update

The formatting of the quoted information in the issue summary was lost and it doesn't link to the comments they were copied from.

Why is this in the image system component?

Finally: how is this related to CKEditor? This is first and foremost related to the media_embed filter AFAICT?

heddn’s picture

Title: Handle overriding loading attribute in CKEditor » Handle overriding loading attribute in embedded media
Component: image system » media system
Status: Postponed (maintainer needs more info) » Active
Issue tags: -Needs issue summary update

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

ressa’s picture

I get the impression from #3167034: Leverage the 'loading' html attribute to enable lazy-load by default for images in Drupal core and #3247795: Add text filter plugin to support <img loading="lazy"> and remove it from editor_file_reference that I can override with loading="eager", but it seems to not work. I left a comment in the Change Record Enabled native lazy-load by default for images about it:

loading="eager" is ignored

I cannot override loading="lazy" via the source of an embedded CKEditor image, even though it says on the "Basic HTML" settings page:

I cannot override loading="lazy" via the source of an embedded CKEditor image, even though it says on the "Basic HTML" settings page:

[x] Lazy load images
Instruct browsers to lazy load images if dimensions are specified. Use in conjunction with and place after the 'Track images uploaded via a Text Editor' filter that adds image dimensions required for lazy loading. Results can be overridden by <img loading="eager">.

But here's the default Filter settings > Limit allowed HTML tags and correct faulty HTMLEnabled > Allowed HTML tags for img, and loading is not included:

<img src alt height width data-entity-uuid data-entity-type data-caption data-align>

So it makes sense that it will be stripped, I guess?

Only if I manually add <img loading> under CKEditor 5 plugin settings > Source editing > Manually editable HTML tags is it included under Allowed HTML tags, and loading="eager" sticks in CKEditor:

<img loading src alt height width data-entity-uuid data-entity-type data-caption data-align>

Is it necessary to manually allow the loading parameter, and if so, could it be added in the help text? Or perhaps there is some other requirement that I am missing?