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

Hi @farazfrank

Thank you for contacting us!

This kind of issue should be related to WebP display when using picture tags. If you deactivate the display WebP option is the issue fixed?
If so, this is because the picture tags option swaps out your page’s tags for <picture> tags. This change can cause layout issues when CSS styles are not applied to the <picture> elements because they are targeted for elements.

Let me know if you have any further questions. I’ll be happy to help.

Best Regards,
Ioanna

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

Thanks for your response.

Why are you replacing the source like <img> with a <picture> tag?

What if any js library builds on the support of the <img> tag?

Mostly Image and Photo Gallery and Slider plugins use the <img> tag.

Does WEBP not support the <img> tag?

Like if I want to make my plugin compatible with Imagify then what is the procedure?

Any help is appreciated.

Thanks

• This reply was modified 2 years, 4 months ago by FARAZFRANK.

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

Thanks for the reply, but it didn’t help.

Cause mostly slider plugin works with JS Library and mine too.

Like if your plugin put the additional tag in the page source then it breaks the JS library working hierarchy.

It needs to modify the whole library file due to only one tag.

maybe you can understand my use case.

Thanks

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

Thanks, Marko for your feedback about that update.

I hope it will make our plugin compatibility strong.

So, I can suggest it to more of my users.

Thanks for the help.

Great Day!