Liquid, JavaScript, themes, sales channels
I have created the following liquid for the display of responsive images. It is intended to display the 720 pixel image below our media query break point of 720 pixels. It is incorrectly displaying that size at all widths, as confirmed in the network tab of developer tools.
<img
class="first-image"
loading="lazy"
src="{{ product.images.first | img_url: '370x370', crop: 'center' }}"
srcset="{{ product.images.first | img_url: '720x720', crop: 'center' }} 720w,
{{ product.images.first | img_url: '550x550', crop: 'center' }} 550w"
alt="{{ product.images.first.alt | escape }}"
sizes="(max-width: 720px) 100vw, 370px"
width="370"
height="370"
/>
I am using
product.images.first
to display the image because within this section of the website we are required to echo out the first and last images from each product. I am echoing out about ten images on the page using this code. I am also using
product.images.last
to display the last image from each product elsewhere.
I've tried using data-srcset (with data-src), but that does not resolve the issue.
Is the problem caused by the method with which I'm grabbing the image?
The images are included in a carousel, where the images slide in and out of visibility from right to left. Could that be causing the issue?
Alternatively, I've also tried using the image_tag filter, as below, to similar results.
{{ product.images.first | image_url: width: 370 | image_tag: width: 370, height: 370, widths: '370, 550, 720', sizes: '(max-width: 720px) 100vw, 370px' }}
User | RANK |
---|---|
37 | |
27 | |
14 | |
13 | |
9 |
Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023