Lazy Loading WYSIWYG Images
3 posts by 3 authors in: Forums > CMS Builder
Last Post: February 23, 2022 (RSS)
By KennyH - January 27, 2022
I am wanting to get loading="lazy" automatically added to images placed in the WYSIWYG content. I know how to have classes added to images automatically, but this one is giving me problems.
Any suggestions?
// configure image plugin
toolbar: "image",
image_caption: true,
image_class_list: [
{title: 'None', value: 'img-fluid m-1'},
{title: 'Circle', value: 'rounded-circle img-fluid m-1'},
{title: 'Rounded', value: 'rounded img-fluid m-1'},
{title: 'Thumbnail', value: 'img-thumbnail img-fluid m-1'},
],
visualblocks_default_state: false,
end_container_on_empty_block: true,By daniel - February 9, 2022
Hi KennyH,
I'm not sure how to achieve this result directly through the TinyMCE config, but one possibility would be to add a class called "lazy", then on the front-end use some JavaScript to detect the class and add the loading="lazy" attribute when the page loads. Would this work for your needs?
Daniel
Technical Lead
interactivetools.com
By kitsguru - February 23, 2022 - edited: February 23, 2022
I use the javascript from github.com/aFarkas/lazysizes
Then all you need to do is add the class 'lazyload' to your class list.
image_class_list: [
{title: 'None', value: 'img-fluid m-1 lazyload'},
{title: 'Circle', value: 'rounded-circle img-fluid m-1 lazyload'},
{title: 'Rounded', value: 'rounded img-fluid m-1 lazyload'},
{title: 'Thumbnail', value: 'img-thumbnail img-fluid m-1 lazyload'},
],You could then modify the img tag to use data-src instead of src by redifining the image button @see: https://stackoverflow.com/questions/45728568/how-to-change-default-html-for-adding-image-in-tinymce