Skip to content

Instantly share code, notes, and snippets.

@shopifypartners

shopifypartners/responsive-images-narrative-image-widths.html

Created July 10, 2017 19:22
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save shopifypartners/924c78d3303cd90b0a7671f94d65f51c to your computer and use it in GitHub Desktop.
Save shopifypartners/924c78d3303cd90b0a7671f94d65f51c to your computer and use it in GitHub Desktop.
Download ZIP
Responsive images: Narrative image widths – https://www.shopify.com/partners/blog/using-responsive-images
Raw
responsive-images-narrative-image-widths.html
<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 }}">
@stevomccormack
Copy link

A wonderful new feature ;)

@Lysindr
Copy link

Lysindr commented Aug 7, 2019

What is the "img_url" on line 3 in data-src attribute?

@SandyWyper
Copy link

What is the "img_url" on line 3 in data-src attribute?

It loads a 100px wide version as a place holder i think.

@haroldao
Copy link

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"

@ilyazub
Copy link

ilyazub commented Mar 17, 2021

Just documenting that it will result in something like this on the Narrative Warm theme.

image

<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