A space to discuss online store customization, theme development, and Liquid templating.
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hello,
I use the image_url and image_tag filters to have optimized images on the themes I develop.
When we give a high value of the dimensions, it generates a srcset attribute to optimize the media on different devices.
To take the example from the documentation (https://shopify.dev/api/liquid/objects#images😞
{{ images['potions-header.png'] | image_url: width: 1000, height: 1000, crop: "center" | image_tag }}
renders
<img src="//cdn.shopify.com/s/files/1/0561/7470/6753/files/potions-header.png?v=1650325393&width=1000" alt="" srcset="//cdn.shopify.com/s/files/1/0561/7470/6753/files/potions-header. png?v=1650325393&width=352 352w, //cdn.shopify.com/s/files/1/0561/7470/6753/files/potions-header.png?v=1650325393&width=832 832w" width="1000" height="577">
But when you add a height parameter, it is not changed in the srcset like this (I also added a crop):
{{ images['potions-header.png'] | image_url: width: 1000, height: 1000, crop: "center" | image_tag }}
this renders:
<img src="//cdn.shopify.com/s/files/1/0561/7470/6753/files/potions-header.png?crop=center&height=1000&v=1650325393&width=1000" alt="" scrcset="//cdn.shopify.com/s/files/1/0561/7470/6753/files/potions-header.png? crop=center&height=1000&v=1650325393&width=352 352w, //cdn.shopify.com/s/files/1/0561/7470/6753/files/potions-header.png?crop=center&height=1000&v=1650325393&width=832 832w" width="1000" height="1000">
I think this is a bug in shopify so I share it and if there is ever a solution with these functions I am listening.
Up ?