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?


Technical Lead