I have a blog front page where the theme, grabs multiple posts and displays them on a the front page. There is one big image on the left and 2 or 2 smaller images on the right displaying posts.
However, I want to exclude the big image from lazy loading and based on my research the only way to do so is to identify the url of the image and place a code sniper in the functions.php file to tell it to “no-lazy-load”
Here is the functions.php file.
This is exactly why I am not a fan of Elementor
function add_no_lazy_load_class_to_featured_image($html, $post_id, $post_image_id) {
// Define the URL of the LCP image
$lcp_image_url = ‘https://wordpress.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-…’; // Replace with your actual LCP image URL
// Add the custom class to the featured image on single post pages, homepage, and archive pages
if (is_single() || is_home() || is_archive()) {
// Check if the current image is the LCP image
if (strpos($html, $lcp_image_url) !== false) {
$html = str_replace(‘class=”‘, ‘class=”no-lazy-load ‘, $html);
}
}
return $html;
}
add_filter(‘post_thumbnail_html’, ‘add_no_lazy_load_class_to_featured_image’, 10, 3);