Page 1 of 1

MicroTiny strips 'loading="lazy"' from html source

Posted: Sat Sep 03, 2022 11:37 am
by creopard
I'd like to add the attribute

Code: Select all

loading="lazy"
to an image in the HTML source code when editing content with MicroTiny like this:

Code: Select all

<img loading="lazy" src="uploads/images/picture.jpg" alt="text" width="50" height="150" />
However, MicroTiny always strips the part with

Code: Select all

loading="lazy"
when saving the input.
Is there a way to turn that behaviour off, so MicroTiny would keep this?

Re: MicroTiny strips 'loading="lazy"' from html source

Posted: Sat Sep 03, 2022 11:54 am
by velden
I don't think you can change the behavior without 'hacking' the config file (we don't support posting hacks in this forum).

Have a look at https://www.tiny.cloud/docs/configure/c ... d_elements
and \modules\MicroTiny\templates\tinymce_config.js

Re: MicroTiny strips 'loading="lazy"' from html source

Posted: Sat Sep 03, 2022 1:34 pm
by DIGI3
If you don't want to modify the tiny config, you could use the {image} tag. A generic template or udt also can work.
Less efficient approach, you could try adding data-loading="lazy" then in your content tag do {content|replace:'data-loading':'loading'} - I'm assuming tiny doesn't strip data- attributes but I haven't tested.

Re: MicroTiny strips 'loading="lazy"' from html source

Posted: Mon Sep 05, 2022 10:59 am
by creopard
Thank you for the suggestions!
I'd also like to avoid hacks in the config file, so I took a more "global" approach to add it to all images in the content:

Code: Select all

{$content|replace:'<img ':'<img loading="lazy" '}
which works also flawlessly :)