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 attributeThe 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
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.
Comments
Comment #2
wim leersThe 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 component?
Finally: how is this related to CKEditor? This is first and foremost related to the
media_embedfilter AFAICT?Comment #3
heddnComment #6
ressaI 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: