Shopify themes, liquid, logos, and UX
I'm currently utilising Metaobjects to output some content on PDP pages and one of the values is a reference to an image file in the Files section. If i upload a PNG / JPG, it outputs fine in the browser using:
<img src="{{ 'example.png' | file_img_url: '500x' }}" />
But if I upload a WEBP image, it does not work. Is this just an oversight and is there a way around this (aside from just using PNGs instead)? I can't see any other way of referencing an image file in metaobjects.
Thanks
Solved! Go to the solution
This is an accepted solution.
Hi @maxgrind,
To display WEBP images in Shopify using metaobjects, you can use the file_url filter or the <picture> element for compatibility:
Directly reference the WEBP image without resizing:
Provide both WEBP and a fallback format:
This ensures the image displays correctly in all browsers, with WEBP for those that support it and PNG/JPG as a fallback.
Thanks!
This is an accepted solution.
Hi @maxgrind,
To display WEBP images in Shopify using metaobjects, you can use the file_url filter or the <picture> element for compatibility:
Directly reference the WEBP image without resizing:
Provide both WEBP and a fallback format:
This ensures the image displays correctly in all browsers, with WEBP for those that support it and PNG/JPG as a fallback.
Thanks!
Yeah that's what I thought. It's strange that it's unable to work with file_img_url but does work when using img_url. I guess i'll have to use this fallback, thanks for your help.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024