Liquid, JavaScript, themes, sales channels
Hello everyone,
I'm trying to edit this line of code to make the size of my banner more responsive to the size of the page.
data-bgset="{{ collection.image | img_url: '600x' }} 600w, {{ collection.image | img_url: '800x' }} 800w, {{ collection.image | img_url: '1200x' }} 1200w, {{ collection.image | img_url: '1400x' }} 1400w, {{ collection.image | img_url: '1600x' }} 1600w">
I did some research and I cant figure out what the "600w" part does.
Also, I played around with the numbers but I don't really notice changes.
Ideally, I'd like it to look good from desktop to mobile but I'm not sure if I'm approaching the problem the right way.
Thank you very much in advance,
data-bgset is a set of rules which instruct browser what image file to use as background depending on the actual width of this element on the screen, so each line like
{{ collection.image | img_url: '600x' }} 600w
means "use this file (which is actually resized to 600 pixels wide by Shopify image engine) when element width on screen will be 600 pixels (w is used do denote width in pixels).
This data-bgset attribute works with lazysizes library https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset and follows the same notation for background as srcset attribute for images -- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024