Skip to content

Instantly share code, notes, and snippets.

@craigcooperxyz

craigcooperxyz/picture.liquid

Created July 1, 2021 14:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save craigcooperxyz/2afe06546575b1bf2733004c737a5e63 to your computer and use it in GitHub Desktop.
Save craigcooperxyz/2afe06546575b1bf2733004c737a5e63 to your computer and use it in GitHub Desktop.
Download ZIP
Picture element for images in Shopify
Raw
picture.liquid
{% assign image = image %}
<picture>
<source srcset="{{ image | img_url: '335x', format: 'pjpg'}}, {{ image | img_url: '670x', format: 'pjpg' }} 2x"
media="(max-width: 375px)">
<source srcset="{{ image | img_url: '750x', format: 'pjpg'}}, {{ image | img_url: '1500x', format: 'pjpg' }} 2x"
media="(max-width: 749px)">
<source srcset="{{ image | img_url: '1500x', format: 'pjpg' }}"
media="(min-width: 750px)">
<img src="{{ image | img_url: '1500x', format: 'pjpg' }}" alt=""
srcset="{{ image | img_url: '1500x', format: 'pjpg' }}">
</picture>
@craigcooperxyz
Copy link
Author

  • Remove format: 'pjpg' where not appropriate, particularly if using transparent PNGs
  • Add as many sources as required by the project, try to be as close as possible to the final rendered size for your various breakpoints as you can get

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment