Lazy Loading WYSIWYG Images

3 posts by 3 authors in: Forums > CMS Builder
Last Post: February 23, 2022 (RSS)

Archived
Reply
Reply

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,

Archived
Reply
Reply

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

Daniel
Technical Lead
interactivetools.com

Archived
Reply
Reply

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

Jeff Shields