Hey @katmacau,
I have just tested this on my end by adding the code to one of my page templates. It worked, WebP is delivered.
So, I used the exact code you mention:
wp_get_attachment_image_src(get_post_thumbnail_id( $post_id ), 'large');
And set the Featured image to page/post. Then optimized image (as it was not optimized in my case) and made sure WebP exists for that one. It worked fine.
I used <picture>
tag method to deliver it. Can you check again or provide any other info that could be useful to debug the problem?
Thanks!
Marko
Thanks Marko
In my instance I am getting the image URL and adding as a css background image and not an image on the page. For example:
`
$post_id = get_the_ID();
if( has_post_thumbnail( $post_id ) ) {
$thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id( $post_id ), ‘large’);
$thumb_url = $thumb_url[0];
?>
<div class=”single-hero-image” style=”background-image:url(<?php echo “$thumb_ur”; ?>Text…</div>
<?php
} ?>
However, instead of getting the webp file, I get https://mysite.com.au/wp-content/uploads/myimage-1100×825.jpg.
Thanks
Hey @katmacau
Thanks, that makes things more clear. It is not possible to fetch background images using <picture>
tags at the moment (not only with Imagify, but any other similar tool as far as I know).
So that’s the main problem.
If you don’t use CDN/Cloudflare or some extensive server caching solution, you might consider using rewrite rules method as it would fetch background images as well.
Let me know if you need any further assistance, I am happy to help.
Best Regards,
Marko
Thanks. So you cannot get the url or of the webp version of the file using any of the get image related wordpress functions?
Do you mind please explain how I would use the picture tag to display a posts featured image on the page?
Hey @katmacau
The problem is the way you are delivering it on the front-end. If you deliver it standard way using <img src...
, it will work.
If you add it using CSS (as background image), it will not work.
The thing is, you could “hack” the system by appending .webp
to the source you get, but this is a problem for browsers that do not support WebP (it’s minority of browsers but still…).
> Do you mind please explain how I would use the picture tag to display a posts featured image on the page?
If you use it not as a background image, it will work. Or you can use rewrite rules method as I explained.
Let me know what you think.
Best Regards
Marko
I see now. If I use the standard wp_get_attachment_image($image_id,'medium')
wordpress function it will actually add in the picture tag and webp format.
I will switch my layout to use the images as picture tags that site under content instead of css backgrounds.
Thanks Marko.
Hey @katmacau
Thanks for confirmation!
Don’t hesitate to get in touch if you need any further help.
Best Regards
Marko