Skip Lazy Loading by Image Class Added to Figure Element in WordPress

Question

This is how images are output in WordPress:

<figure class="no-lazy"><img loading="lazy" class="wp-image-12345" src="apple.jpg" alt="apple"></figure>

I want to adjust the loading attribute for images in WordPress. I am currently using the following solution using str_replace:

add_action( 'template_redirect', function(){
    ob_start( function( $buffer ){

$buffer = str_replace( array( '<figure class="no-lazy"><img loading="lazy"', "<figure class='no-lazy'><img loading='lazy'"), '<figure class="no-lazy"><img loading="eager"', $buffer );

        return $buffer;
    });
});

However, I believe there is a better way to achieve my goal using wp_img_tag_add_loading_attr.

The wp_img_tag_add_loading_attr solution only works if the class is assigned directly to the image element (img) as follows:

<img loading="lazy" class="no-lazy" src="apple.jpg" alt="apple">

Here's the wp_img_tag_add_loading_attr code that changes the loading attribute of images with class="no-lazy" from lazy to eager:

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;
}

The issue in WordPress is that the class is added to the figure and not the image as follows:

<figure class="no-lazy"><img loading="lazy" src="apple.jpg" alt="apple"></figure>

How do I use preg_match and wp_img_tag_add_loading_attr to achieve the same thing as the str_replace solution above?

'/<figure [^£]*?my_css_class[^£]*?<\/figure>/'

PS - I am not familiar at all with preg_match and I am aware that wp_img_tag_add_loading_attr has been deprecated.

Your uses of $buffer seems to have come out of nowhere. I thought you were telling us that we only had access to $value, $image, $context. — mickmackusa
– mickmackusa ♦, Commented May 25, 2024 at 22:07
You've haven't posted your resolving code as a question edit, right? If you have a resolution, that is to be posted as an answer. Ideally, you shouldn't be performing string surgery like this. If you have valid HTML, the most reliable technique is to use a DOM parser (like DomDocument). Can you edit your question to show us a minimal example of the $buffer string? — mickmackusa
– mickmackusa ♦, Commented May 26, 2024 at 0:04
There's actually two solutions in my question. I was attempting to find a third one using preg_match. Will re-arrange my questions so that it makes more sense... — Wanderlust Consulting
– Wanderlust Consulting, Commented May 26, 2024 at 0:13
Please edit your question to include realistic sample text returned from wp_img_tag_add_loading_attr() so that there is a minimal reproducible example. — mickmackusa
– mickmackusa ♦, Commented May 26, 2024 at 7:10

Wanderlust Consulting · Accepted Answer · 2024-05-28 17:18:05Z

1

Here's the solution:

function add_loading_attr_to_img_in_figure($content) {
    // Define the pattern to match a <figure> with the specific class
    $pattern = '/(<figure[^>]*class="[^"]*eager-load[^"]*"[^>]*>)(.*?)(<img[^>]+>)(.*?<\/figure>)/is';

    // Define the replacement to add the loading="eager" attribute to the <img> tag
    $replacement = '$1$2<img loading="eager"$3$4';

    // Use preg_replace to modify the content
    $content = preg_replace($pattern, $replacement, $content);

    return $content;
}

// Add the filter for the_content to modify images in post content
add_filter('the_content', 'add_loading_attr_to_img_in_figure');

answered May 28, 2024 at 17:18

Wanderlust Consulting

6458 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Skip Lazy Loading by Image Class Added to Figure Element in WordPress

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related