Created
July 10, 2017 19:22
-
-
Save shopifypartners/924c78d3303cd90b0a7671f94d65f51c to your computer and use it in GitHub Desktop.
Responsive images: Narrative image widths – https://www.shopify.com/partners/blog/using-responsive-images
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<img class="slideshow__image slideshow__image--{{ block.id }} lazyload" | |
src="{{ block.settings.image | img_url: '300x' }}" | |
data-src="{{ img_url }}" | |
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]" | |
data-aspectratio="{{ block.settings.image.aspect_ratio }}" | |
data-sizes="auto" | |
data-parent-fit="cover" | |
alt="{{ block.settings.image.alt | escape }}"> |
What is the "img_url" on line 3 in data-src attribute?
What is the "img_url" on line 3 in data-src attribute?
It loads a 100px wide version as a place holder i think.
What is the "img_url" on line 3 in data-src attribute?
Image Url... Something like that: "//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_500x500.jpg?v=1560284062"
Just documenting that it will result in something like this on the Narrative Warm theme.
<img
class="slideshow__image slideshow__image--1486649146314 lazyautosizes lazyloaded"
src="//cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_300x.jpg?v=1492700691"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="1.5157894736842106"
data-sizes="auto"
data-parent-fit="cover"
alt="Ratio Eight coffee machine"
data-srcset="//cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_540x.jpg?v=1492700691 540w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_720x.jpg?v=1492700691 720w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_900x.jpg?v=1492700691 900w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_1080x.jpg?v=1492700691 1080w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_1296x.jpg?v=1492700691 1296w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_1512x.jpg?v=1492700691 1512w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_1728x.jpg?v=1492700691 1728w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_1944x.jpg?v=1492700691 1944w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_2048x.jpg?v=1492700691 2048w"
sizes="1508px"
srcset="//cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_540x.jpg?v=1492700691 540w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_720x.jpg?v=1492700691 720w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_900x.jpg?v=1492700691 900w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_1080x.jpg?v=1492700691 1080w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_1296x.jpg?v=1492700691 1296w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_1512x.jpg?v=1492700691 1512w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_1728x.jpg?v=1492700691 1728w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_1944x.jpg?v=1492700691 1944w, //cdn.shopify.com/s/files/1/1906/1399/files/Hero-Eight_2048x.jpg?v=1492700691 2048w"
/>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A wonderful new feature ;)