- This topic has 11 replies, 5 voices, and was last updated 1 year, 7 months ago by David.
-
AuthorPosts
-
May 18, 2022 at 11:25 am #2224103Fabio
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? …
May 18, 2022 at 11:38 am #2224140YingStaffCustomer SupportHi 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' );
May 18, 2022 at 11:46 am #2224174Fabioyes 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 ?
May 18, 2022 at 12:11 pm #2224250YingStaffCustomer SupportCan 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!
May 18, 2022 at 12:19 pm #2224265Fabiook 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-contextsso 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? ๐
May 18, 2022 at 1:05 pm #2224353YingStaffCustomer SupportAs 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.May 18, 2022 at 1:07 pm #2224360FabioOh that’s a great news! i wish it will arrive soon this 1.5 !
thank you ๐May 18, 2022 at 1:52 pm #2224436YingStaffCustomer SupportIt’s now open for testing, you can download it here:
https://generateblocks.com/generateblocks-1-5-dynamic-data-query-loops-image-blocks/May 18, 2022 at 9:10 pm #2224801IanHi 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?
May 19, 2022 at 5:26 am #2225316DavidStaffCustomer SupportHi there,
simply adding
skip-lazy
to the GB Image block won’t do anything. That reply was in reference to the OPs reply here: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:
August 15, 2022 at 1:20 pm #2313756SamI’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; }
August 16, 2022 at 12:57 am #2314125DavidStaffCustomer SupportAwesome – glad to hear that!
-
AuthorPosts
- You must be logged in to reply to this topic.