WebP Format Display Function Breaks the Theme

Resolved ArtFl
(@artfl)

6 years, 5 months ago

Hi team,

You’ve got a great plugin but there’s a problem.

We had to turn off the “Display images in webp format on the site” function of your plugin because it breaks the design of our website.
If this function is switched on, then the padding around the aligned-left pictures disappear and they look bad on the page.

Please view the screenshots.

Without Imagify:
1/ https://drive.google.com/open?id=1VPxyThJDoO5jui6iQnrcaa2ZO7WsB7Cv
2/ https://drive.google.com/open?id=1s-serybldevzZwhMrD6TbCKe_cWTtMYf

With Imagify:
1/ https://drive.google.com/open?id=1ic49YAheH5PoarZRKjjHXgueQ9kA4v3y
2/ https://drive.google.com/open?id=15_VbZbscOZt35eqPvbmqsDVWO2QnACbR

It’s a pity because we have installed Imagify to display WebPs.
Is it possible to fix this bug?

Regards,

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author WP Media
(@wp_media)

6 years, 5 months ago

Hi,

The reason for this is because we change the HTML output by adding <picture> tag on top of your original tag. If your theme does not handle picture tags with CSS as same as for img tag, there is layout issue.

There are two solutions:

1. to contact your theme provider and ask them to update the theme to handle picture tags as same as img tags
2. to add custom CSS in order to fix these layout issues

Since you use Cloudflare, there is no possibility to use rewrite rules to show WebP, otherwise, this would be the recommended way.

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

Best Regards

Thread Starter ArtFl
(@artfl)

6 years, 5 months ago

Hi and thank you for the reply.

Could you please give me the custom CSS code to put it into the style.css file? We use Genesis News Pro theme.

Best regards

alexdex
(@alexdex)

6 years, 4 months ago

Hi, i have the same problem, many css are not working anymore

A normal text image align is not working, border radius not working etc….

The theme support found the problem regarding your plugin they told me:

The image is not outputting the normal HTML. It is inside of a <picture> element

The code that you sent through in the previous email should work:

But in the inspector:

<picture class=”size-medium wp-image-1739 aligncenter” width=”300″ height=”300″>
<source type=”image/webp” srcset=”https://www.gfour.co.th/web/wp-content/uploads/2019/10/GFour-App-Icon-300×300.jpg.webp, https://www.gfour.co.th/web/wp-content/uploads/2019/10/GFour-App-Icon-150×150.jpg.webp 150w, https://www.gfour.co.th/web/wp-content/uploads/2019/10/GFour-App-Icon-100×100.jpg.webp 100w, https://www.gfour.co.th/web/wp-content/uploads/2019/10/GFour-App-Icon.jpg.webp 600w” sizes=”(max-width: 300px) 100vw, 300px”>

</picture>

Of course, cannot work

Please i need a solution as soon as possible, i need to go online and all my image, css in general are not working

Plugin Author WP Media
(@wp_media)

6 years, 4 months ago

Hi everyone,

Thanks for your patience!

Unfortunately, the custom CSS code could be different for each site or site’s element so we are not able to deliver the general code that works 🙁

If there are many layout issues and your theme provider can not give the CSS code to fix it, you should consider using rewrite rules of displaying WebP (if you are on Apache server and don’t use CDN/Cloudflare) or turn off WebP display completely 🙁

Best Regards

Thread Starter ArtFl
(@artfl)

6 years, 4 months ago

Thank you for clarifying, WP Media 🙁

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘WebP Format Display Function Breaks the Theme’ is closed to new replies.

Tags