shopify-srcset.liquid

<!-- 
* 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 %}