MicroTiny strips 'loading="lazy"' from html source Topic is solved

[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?

[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

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

[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