Plugin Compatibility

Hi @farazfrank

Thanks a lot for contacting us.

This is probably caused by WebP display feature (using <picture> tags method), which might be in conflict with LazyLoad feature from users’ theme or some other plugin.

Another possibility is that classes are moved to <picture> tag from <img> tag which caused the problem since CSS does not fetch <picture> tag.

We had one case yesterday/today and we solved it by using a helper plugin. You can check this code.

You can take the function and implement in the slider or offer it as helper plugin to users who experience the problem.

If the issue is happening because of changed HTML layout, it would be good to analyse that and eventually update your CSS code so it starts to handle <picture> tags as same as <img> tags.

Hope this helps.

​Let me know if you need any further assistance, I am happy to help.

Best Regards
Marko

Hey @farazfrank

Sorry for multiple messages sent at once!

I just wanted to check if you got our replies and see if you need any additional help?

Best Regards
Marko

Hey @farazfrank

We do not replace <img> but only wrap it around <picture>. And it is used because it’s more practical, it allows us to use different image sizes. It’s used by other similar tools.

So, <img> is still there and can be used. The thing to have in mind for plugin authors like you, is to compare with <picture> tag output and see how <img> is used in that layout, so you could update your CSS and JS code to fetch the element.

For example, if you fetch images with this CSS code:

img.someclass { max-width: 200px;}

It will not work when WebP is used, because you fetch <img> tag directly and the class is now moved to <picture> tag. You should update your code so it looks like this (this is just a rough example):

img.someclass, picture.someclass img { max-width: 200px; }

Hope this helps. ​Let me know if you need any further assistance, I am happy to help.

Best Regards
Marko

Hey @farazfrank

Yes, I completely understand – unfortunately, you are right when you say the library should be changed in order to be compatible with new layout.

However, there is a good news – we already work on a new update related to WebP (and AVIF), and it will change the way WebP is delivered – there will not be this kind of markup change and it will be fully compatible with Cloudflare/CDN.

It will take some time (a few months) but it will be a real game changer.

What you might try is to check other plugins such as WebP Express or WebP feature from WP Rocket and see if it works any better. WebP Express might produce similar troubles as I think they also change the markup when using <picture> tags method.

Best Regards
Marko