Images not displaying after plugin is enabled.

Hi,

It’s a conflict with the theme. the background image for the containing div is dynamically added by copying the src value of the contained image, and using it as a style attribute.

With lazyload active, it’s copying the placeholder value instead of the real value, so the images are not displayed.

The only solution here would be to disable lazyload for this page.

OK I believe I understand most of that. But can I ask why you say it is a conflict with the theme? The direct parent to the tag is a <div> with the class sola_t_image. It is this <div> that has the background-image. If this is the <div> you are referencing, then it is added by a plugin (Sola Testimonials), not by my theme. Or are you referencing something else?

>> The only solution here would be to disable lazyload for this page.

That could be a solution. How would I approach that?

This is the HTML before JavaScript from the plugin does any modification:

<div class="sola_t_image " style="width:120px; height:120px;"><img src="data:image/svg+xml,%3Csvg%20xmlns='https://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-lazy-src="https://www.horizonhomes-samui.com/wp-content/uploads/2015/04/t-ianfayhamilton.jpg" title="Ian & Fay Hamilton" alt="Ian & Fay Hamilton" /><noscript><img src="https://www.horizonhomes-samui.com/wp-content/uploads/2015/04/t-ianfayhamilton.jpg" title="Ian & Fay Hamilton" alt="Ian & Fay Hamilton" /></noscript></div>

And this is after:

<div class="sola_t_image imgLiquid_bgSize imgLiquid_ready" style="width: 120px; height: 120px; background-image: url(&quot;data:image/svg+xml,%253Csvg%2520xmlns='https://www.w3.org/2000/svg'%2520viewBox='0%25200%25201%25201'%253E%253C/svg%253E&quot;); background-size: cover; background-position: center top; background-repeat: no-repeat;"><img src="https://www.horizonhomes-samui.com/wp-content/uploads/2015/04/t-ianfayhamilton.jpg" data-lazy-src="https://www.horizonhomes-samui.com/wp-content/uploads/2015/04/t-ianfayhamilton.jpg" title="Ian & Fay Hamilton" alt="Ian & Fay Hamilton" style="display: none;" class="lazyloaded" data-was-processed="true"><noscript><img src="https://www.horizonhomes-samui.com/wp-content/uploads/2015/04/t-ianfayhamilton.jpg" title="Ian & Fay Hamilton" alt="Ian & Fay Hamilton" /></noscript></div>

As you can see, all the inline CSS contained in the style attribute is added dynamically by the JS from the plugin. And the background-image is based on the src attribute of the image container in the div.

To disable lazyload on this page, you can use the following code:

add_action( 'wp', 'deactivate_rocket_lazyload_on_single' );
function deactivate_rocket_lazyload_on_single() {
    if ( is_single( page_id ) ) {
        add_filter( 'do_rocket_lazyload', '__return_false' );
    }
}

by replacing page_id by the slug or ID of the page.

>> As you can see, all the inline CSS contained in the style attribute is added dynamically by the JS from the plugin.

Right. I see and understand all that. It’s just that earlier you said it was the theme, while to me it looked like it was the plugin instead. And now you’re also saying it’s the plugin. I just want to be sure we’re on the same page as to what we are both seeing. It’s definitely the plugin causing this behavior, and not the theme–correct?

>> To disable lazyload on this page, you can use the following code:

OK that worked, thanks.

yes it’s the plugin. I didn’t know before if this testimonial part was a theme or a plugin feature on your site.

OK no worries. The behavior is indeed from a plugin (Sola Testimonials), and not my theme. I’ve asked the plugin dev to have a look and see if he can implement an easy fix. If not, I’ll simply live with lazy load disabled on this page.

Thanks for your help. We can consider this resolved.

FYI: You gave me code to disable lazy load on a particular page. But is it possible to add code to disable lazy load for specific images?

For this case it’s not possible because there is no pattern in the images HTML that we could use to exclude them.

But in the FAQ we have an example of how to exclude images based on a class or an URL for example.

Actually that question wasn’t for this particular issue, it was for a separate issue on another page. But let’s consider this ticket resolved, thanks.