October: Add ability to specify loading attribute on images in the richeditor

[ayumi-cloud]

Was reading today, Google is asking all CMS owners to add a feature to automatically add loading="lazy" to all img tags that have width and height attributes present.

Some cms examples:

Wordpress: https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/

Joomla: https://github.com/joomla/joomla-cms/pull/28838

Typo3: https://review.typo3.org/c/Packages/TYPO3.CMS/+/63317

Drupal: https://www.drupal.org/project/native_lazy_loading

etc.

It makes sense for October CMS to follow web standards for cms.

Native lazy loading is part of the web standards found here: https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes

They also say to remove and don't use any javascript fallback methods - which removes the src attribute of an image or iframe.

(For me I was using a fallback library from Lazysizes - which I'm now going to remove).

Going to close this issue.

A quick summary of points:

1. Against suggesting lazy loading all images, instead we rather only lazy loading images below-the-fold.
2. Against post processing frontend rendering output prior to sending it to the browser to parse for img tags and auto-adding the attribute.
3. Add a lazy loading option to the Rich Editor.
4. October is aimed at developers, so it's more important allowing them to choose the best options and let them add lazy loading at the theme level.
5. Add a lazy loading plugin as a last resort.
6. Add a lazy-loading check to our Lighthouse cms stack pack, pointing to our custom solutions.

[Samuell1]

I recently was adding this to images manually but i disagree with automatically adding this to all images because it should be added only on images below-the-fold to prevent screen flickering or wrong loading of images. I think developer should choose where to add lazy loading.

[LukeTowers]

Yuck, looks like this is done by post processing frontend rendering output prior to sending it to the browser to parse for img tags and auto-adding the attribute. That is a horrible idea, and very against October's ethos of not being opinionated with what the frontend is doing.

I'm not opposed to an interface being exposed through the richeditor field to add the attribute to img tags in content controlled by the richeditor field when applicable, but I'm very opposed to the automatic modification of frontend content as a default action done by the core itself.

If someone wants to make a plugin to do the automatic addition of the attribute, that's perfectly fine and is easily achievable through existing events. October will not be adding this functionality to the core at this time however.

Just because someone that works at Google asked for it to be done, and other CMS platforms went and did it does not by any means guarantee that it's a good idea.

[ayumi-cloud]

That's a really funny comment by Luke, made me cry with laugher!

Have to ask this, I always wondered why does the richeditor have H1 - H4 and not H1 - H6 ?

https://github.com/octobercms/october/blob/a095c1e54526c64c70c0af85900d64de3924b4bd/modules/backend/formwidgets/richeditor/assets/js/richeditor.js#L119-L128

[LukeTowers]

@ayumi-cloud probably the same reason the CMS section only shows a single nested level in the file browser; it's typically not that beneficial to actually have that many levels of hierarchy. It's configurable though, so up to the dev what they want to include.

[bennothommo]

I've whipped up a quick plugin to implement this, if anyone is interested: https://github.com/bennothommo/october-plugin-lazy-load - should be on the marketplace soon.

[ayumi-cloud]

@bennothommo

Last night I did a search in the marketplace under the keywords: "lazy" and "lazyload" and couldn't find any plugins.

It's good you're filling the gap.

I'm thinking of changing this code line:

https://github.com/GoogleChrome/lighthouse-stack-packs/blob/3807ae02698aa4c5b54932d8c1f0057f35f2ef47/packs/october.js#L9

Consider installing an [image lazy-loading plugin](https://octobercms.com/plugins/)

The link I want to make more targeted towards finding your plugin in the marketplace.

Something like this:

Consider installing an [image lazy-loading plugin](https://octobercms.com/plugins?search=lazy)

Would that link find your plugin in the marketplace when its released?

Commit: https://github.com/GoogleChrome/lighthouse-stack-packs/pull/57/commits/1b431d92386d33107fb1b215646ded0aa7ad5ce6

[bennothommo]

@ayumi-cloud Yeah, I've submitted the name simply as "Lazy Load", so I believe that search should pick it up :)

[github-actions[bot]]

This issue will be closed and archived in 3 days, as there has been no activity in the last 60 days.
If this issue is still relevant or you would like to see it actioned, please respond and we will re-open this issue.
If this issue is critical to your business, consider joining the Premium Support Program where a Service Level Agreement is offered.

[bennothommo]

Closing as it has been over a month since any activity on this occurred and we are trying to figure out what issues are still relevant. If this is still something that you would like to see through to fruition please respond and we can get the ball rolling.

[LukeTowers]

@bennothommo with your plugin can't that processing be done on save instead of during the rendering process?

[bennothommo]

@LukeTowers I did try that, I opted against it because it changed the formatting of the source code, which might've annoyed people.