Exclude specific images from lazyload – issues with Gutenberg

  • Resolved rivkadr

    (@rivkadr)


    11 months, 1 week ago

    On a site that has Nitropack, we want to be able to use “Exclude CSS Selectors” functionality to prevent specific images from lazyloading. The issue is that with the Gutenberg block editor, when you assign an additional CSS class to an element, it adds it to the parent object, not to the image itself. And thus, the lazyloading exclusion is doing nothing.

    Is it possible to do either of the following:

    1. Put more than just a selector in the exclusion list, i.e. something like: .no-lazyload figure img ??
    2. Some sort of filter or something that will check for .no-lazyload on an element and then also assign it to the child img?

    As it is right now, the exclusion of elements for lazyloaded images is kind of useless, given how Gutenberg builds blocks.

Viewing 1 replies (of 1 total)
  • Plugin Support mihailstoychev

    (@mihailstoychev)

    Thank you for reaching out, @rivkadr!

    Apologies for the delayed response. Yes, NitroPack supports the feature you’re asking for. Actually, the way it works is as you described in option 1. However, it seems that there is a mistake in the selector you have outlined.

    The?.no-lazyload?class isn’t directly added to the image itself, but to the figure element that contains it. So, to prevent images from lazy loading with NitroPack, you should use a selector like this:?figure.no-lazyload img.

    Additionally, you can use any other valid CSS selector to exclude elements. For more information on how to exclude resources in NitroPack’s App, please refer to our tutorial:

    https://support.nitropack.io/en/articles/8390302-excluded-resources

    Hope this helps.

    Feel free to reach out if you have any further questions!

Viewing 1 replies (of 1 total)
  • The topic ‘Exclude specific images from lazyload – issues with Gutenberg’ is closed to new replies.

Tags