[Resolved] How to disable loading=lady on a single image block?

Home Forums Support [Resolved] How to disable loading=lady on a single image block?

Home Forums Support How to disable loading=lady on a single image block?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2224103
    Fabio

    hi all,
    i have a structure like this:

    
    <div class="gb-inside-container">
    <figure class="wp-block-image size-full"><img width="480" height="300" src="https://www.example.com/wp-content/uploads/one.jpg" /></figure>;
    <figure class="wp-block-image size-full"><img width="300" height="218" src="https://www.example.com/wp-content/uploads/two.jpg" alt="" /></figure>
    </div>
    

    they are two images one under the second, both visibile above the fold.
    native lazy load disable lazy loading on the first image, but not on the second.

    i would like to remove loading=”lazy”. from the image “two”, without any external plugins is possible?

    i wanted to try with a function to unset “loading”, but i found it works for featured images in single post.

    it’s possible to do something even with an image in homepage (or generally pages), maybe adding a class “skip-lazy” and then unset attr loading with a conditional function? …

    #2224140
    Ying
    Staff
    Customer Support

    Hi there,

    The lazy loading is controlled by WP, GP has no control over it,

    You can try this PHP snippet to disable WP native lazy loading:
    add_filter( 'wp_lazy_loading_enabled', '__return_false' );

    #2224174
    Fabio

    yes thank you, but if use this i disable it for all the website.

    i need only to disable one single image

    i was trying to work around something similar to this topic
    https://generatepress.com/forums/topic/lcp-issue-featured-image-srcset-scaled-images/page/2/
    and
    https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/

    but they work on featured images

    so my question is may be off-topic cause my needs are about Gutenberg image block and not GP or GP BLOCKS ?

    #2224250
    Ying
    Staff
    Customer Support

    Can you link me to your site where I can see the 2 images?

    As when I test on my end, it seems WP doesn’t add lazy loading to image blocks.

    Let me know!

    #2224265
    Fabio

    ok so, i found a sort of solution from here
    https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/#lazy-loading-image-contexts

    so adding this piece of code in functions.php where 1260 is the exact id of my “two.jpg” (second image)

    
    function skip_loading_lazy_image_1260( $value, $image, $context ) {
        if ( 'the_content' === $context ) {
            $image_url = wp_get_attachment_image_url( 1260, 'full' );
            if ( false !== strpos( $image, ' src="' . $image_url . '"' ) ){
                return false;
            }
        }
        return $value;
    }
    add_filter(
        'wp_img_tag_add_loading_attr',
        'skip_loading_lazy_image_1260',
        10,
        3
    );
    

    i have now that image without lazy loading. i’m still not sure if it’s the right way, and i still don’t know how to make it general , maybe checking if a class on figure tag exists or not ecc

    any ideas? ๐Ÿ™‚

    #2224353
    Ying
    Staff
    Customer Support

    As you are already using GenerateBlocks, I would recommend using the image block of GenerateBlocks 1.5.

    You can add skip-lazy class directly to the image itself.

    #2224360
    Fabio

    Oh that’s a great news! i wish it will arrive soon this 1.5 !
    thank you ๐Ÿ™‚

    #2224436
    Ying
    Staff
    Customer Support

    It’s now open for testing, you can download it here:
    https://generateblocks.com/generateblocks-1-5-dynamic-data-query-loops-image-blocks/

    #2224801
    Ian

    Hi Ying. skip-lazy is interesting. I am testing the new GB image block on a dev site and added this to the image “Additional CSS class(es)”

    1. Source code in Google Chrome still show “<img loading=”lazy”

    2. Does this mean it is still being lazy loaded?

    I guess the more interesting thing is to be able to disable lazy loading of specific images that are above the fold manually.

    Is adding skip-lazy into the image block Additional CSS class(es) the proper way to do this?

    #2225316
    David
    Staff
    Customer Support

    Hi there,

    simply adding skip-lazy to the GB Image block won’t do anything. That reply was in reference to the OPs reply here:

    https://generatepress.com/forums/topic/how-to-disable-loadinglady-on-a-single-image-block/#post-2224265

    where they are using IDs to specifically disable the loading attribute on that image.

    However, the loading=lazy attribute is a browser-level lazy loader. And by default images above the fold (ATF) will not be lazy loaded by it. So for ATF images you don’t need to disable it.

    More info on the spec here:

    https://web.dev/browser-level-image-lazy-loading/

    #2313756
    Sam

    I’m sure there’s a better way to check image classes, but I’ve been able to make the no-lazy class work with this:

    add_filter( 'wp_img_tag_add_loading_attr', 'skip_lazy_load', 10, 3 );
    
    function skip_lazy_load( $value, $image, $context ) {
    	if ( strpos( $image, 'no-lazy' ) !== false ) $value = 'eager';
    
    	return $value;
    }
    #2314125
    David
    Staff
    Customer Support

    Awesome – glad to hear that!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.