Skip to content

Instantly share code, notes, and snippets.

@josephbergdoll
Last active August 7, 2017 18:02
Show Gist options
  • Save josephbergdoll/f4ef94b1fabbf4f7a7f5ef9d76b5e4a9 to your computer and use it in GitHub Desktop.
Save josephbergdoll/f4ef94b1fabbf4f7a7f5ef9d76b5e4a9 to your computer and use it in GitHub Desktop.
<!--
* Liquid Snippet for generating responsive image srcsets based on Shopify's native image transforms.
* Published June 17, 2016 by Joseph Bergdoll
* www.extendedplay.nyc
*
* Full list of Shopify's generated image transforms:
* https://ecommerce.shopify.com/c/ecommerce-design/t/very-important-please-read-new-image-sizes-supported-up-to-2048x2048-for-retina-support-110766
*
* Simply include it within your image element, define the `image`, and the maximum size.
* Product Images and Theme Asset Images should have either `product: 'true'` or `asset: 'true'` declared, respectively.
* All other images such as images from the WYSIWYG page editors have transforms that can be accessed as well, just don't pass along a `product` or `asset` parameter.
*
* Enjoy!
*
*
* Examples
* {% include 'srcset', image: yourImage, product: 'true', size: 'small' %}
* {% include 'srcset', image: yourImage, asset: 'true', size: '1024x1024' %}
* {% include 'srcset', image: yourImage, size: 'master' %}
-->
{% if product == 'true' %}
{{ image.src | product_img_url: 'small' }} 100w,
{% if size == 'compact' or size == 'medium' or size =='large' or size == 'grande' or size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ image.src | product_img_url: 'compact' }} 160w,
{% endif %}
{% if size == 'medium' or size =='large' or size == 'grande' or size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ image.src | product_img_url: 'medium' }} 240w,
{% endif %}
{% if size =='large' or size == 'grande' or size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ image.src | product_img_url: 'large' }} 480w,
{% endif %}
{% if size == 'grande' or size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ image.src | product_img_url: 'grande' }} 600w,
{% endif %}
{% if size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ image.src | product_img_url: '1024x1024' }} 1024w,
{% endif %}
{% if size == '2048x2048' or size == 'master' %}
{{ image.src | product_img_url: '2048x2048' }} 2048w,
{% endif %}
{% if size == 'master' %}
{{ image.src | product_img_url: 'master' }} 2560w
{% endif %}
{% else %}
{% elsif asset == 'true' %}
{% assign imageSrc = image %}
{{ imageSrc | asset_img_url: 'small' }} 100w,
{% if size == 'compact' or size == 'medium' or size =='large' or size == 'grande' or size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ imageSrc | asset_img_url: 'compact' }} 160w,
{% endif %}
{% if size == 'medium' or size =='large' or size == 'grande' or size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ imageSrc | asset_img_url: 'medium' }} 240w,
{% endif %}
{% if size =='large' or size == 'grande' or size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ imageSrc | asset_img_url: 'large' }} 480w,
{% endif %}
{% if size == 'grande' or size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ imageSrc | asset_img_url: 'grande' }} 600w,
{% endif %}
{% if size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ imageSrc | asset_img_url: '1024x1024' }} 1024w,
{% endif %}
{% if size == '2048x2048' or size == 'master' %}
{{ imageSrc | asset_img_url: '2048x2048' }} 2048w,
{% endif %}
{% if size == 'master' %}
{{ imageSrc | asset_img_url: 'master' }} 2560w
{% else %}
{% assign imageSrc = image | replace: '//cdn', 'http://cdn'; | replace: 'http:http://';, 'http://'; | remove: 'https:' | remove: '_small' | remove: '_compact' | remove: '_medium' | remove: '_large' | remove: '_grande' | remove: '_1024x1024' | remove: '_2048x2048' %}
{{ imageSrc | replace_first: '.jpg', '_small.jpg' }} 100w,
{% if size == 'compact' or size == 'medium' or size =='large' or size == 'grande' or size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ imageSrc | replace_first: '.jpg', '_compact.jpg' }} 160w,
{% endif %}
{% if size == 'medium' or size =='large' or size == 'grande' or size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ imageSrc | replace_first: '.jpg', '_medium.jpg' }} 240w,
{% endif %}
{% if size =='large' or size == 'grande' or size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ imageSrc | replace_first: '.jpg', '_large.jpg' }} 480w,
{% endif %}
{% if size == 'grande' or size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ imageSrc | replace_first: '.jpg', '_grande.jpg' }} 600w,
{% endif %}
{% if size == '1024x1024' or size == '2048x2048' or size == 'master' %}
{{ imageSrc | replace_first: '.jpg', '_1024x1024.jpg' }} 1024w,
{% endif %}
{% if size == '2048x2048' or size == 'master' %}
{{ imageSrc | replace_first: '.jpg', '_2048x2048.jpg' }} 2048w,
{% endif %}
{% if size == 'master' %}
{{ imageSrc }} 2560w
{% endif %}
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment