Hello,
we have setup image lazy loading with wp_rocket plugin.
for article images we have exculted class td-modal-image so as first image does not get lazzy loaded and does not cause high lasgest contentfull paing in core web vitals.
We need to do the same for homepage / category pages but there is no specific class for these images.
https://www.kynigesia.gr/
https://www.kynigesia.gr/perivallon/
#tdi_68 .entry-thumb -> This cannot work
span.entry-thumb.td-thumb-css.rocket-lazyload.entered.lazyloaded (this is the category image classes)
here are the plugins requirements:
https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images
Thank you very much for your time.
PS plase add in email a.sklepas@gmail.com too!
Hi,
Unfortunately, this will not be easy to do on the homepage and category as long as the first image on those is dynamic and has the same class as the rest of the pages from the homepage and category. Normally, the class that should be used is td-image-wrap, but should be used only for the first element on page/category
Thank you!
We did fix it with the help of chatgpt.. byt adding:
dd_action(‘template_redirect’, function () {
ob_start(function ($html) {
$count = 0;
return preg_replace_callback(
‘/<span class=”entry-thumb td-thumb-css(.*?)”(.*?)>/’,
function ($matches) use (&$count) {
if ($count === 0) {
$count++;
return ‘<span class=”entry-thumb td-thumb-css skip-lazy’ . $matches[1] . ‘”‘ . $matches[2] . ‘>’;
}
return $matches[0];
},
$html
);
})
the tagdiv should have an add class to image element and add high priority image for this field (and all elements with image – depending on design) on order to be future proof. Thank you.
Hi,
I’m glad that you managed to resolve it!
I will also inform our developer if there is anything they can do to make the process easier.
Thank you!
