Topic: adding lazy loading to images in a gb query loop

Randall
February 22, 2024 at 5:15 am

Hi,
I’m using a GenerateBlocks query loop on my homepage to display a few recent posts. This shows up towards the bottom of the page, pretty much always below the fold.

I think I’m using WordpPress’s default lazy loading here (though TBH it’s a little difficult to tell exactly). But the images loaded by the query loop are not getting the loading=”lazy” attribute.

It doesn’t look like the gb image custom attributes accepts loading as an option. I see that there are a couple of different ways to filter the img attributes from WordPress. But I’m a little lost on how to apply this attribute for a gb image within a gb loop. What’s the best way?
David
February 22, 2024 at 7:52 am

Hi there,

we use the core functions for grabbing featured images, so it should “respect” the default settings which would include the loading attribute or the fetchpriority if its the first image on the page.

Does the issue persist without the image optimizations running on the page ?
Randall
February 22, 2024 at 8:46 am

Hi David, thanks for taking a look at this.

Understood about gb using the core functions.

I do not see the loading=”lazy” attribute on those three images even when Jetpack image CDN and Siteground speed optimizer are turned off and the page is reloaded from origin.

Do you think WordPress’s default lazy-loading might just be skipping those images since they are the first/featured images of posts, but not on an archive page?

In any case, it’d be great if I could somehow get the loading =”lazy” attribute added for those three posts in the gb query loop. They are currently loading at the same time as the actual featured image, and before the images in that gallery they are underneath.
Fernando
February 22, 2024 at 4:41 pm
Hi there,

It seems WordPress only adds loading=”lazy” when a Featured image is queried within a Post not a Page.

Could you add add-lazy-load to the class list of the GB Image Block? Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Then, add this snippet:
```
add_filter( 'render_block', function( $block_content, $block ) {
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'add-lazy-load' ) !== false ) {
		$myreplace = '<img';
		$myinsert = '<img loading="lazy" ';
        $block_content = str_replace( $myreplace, $myinsert , $block_content );
    }

    return $block_content;
}, 10, 2 );
```
Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

Let us know how it goes.
Randall
February 22, 2024 at 6:26 pm

Thank you! That is a great solution to the issue. And it’s great to understand a little about what was happening. Much appreciated.
Fernando
February 22, 2024 at 6:27 pm

You’re welcome, Randall!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

adding lazy loading to images in a gb query loop