image2.liquid

{% comment %}
  image2.liquid

  PURPOSE
  - Output images in a consistent manner, with optional Shopify filters and srcset responsiveness
  - Can be used on both Shopify image objects AND raw image URLs

  SETUP
  - Place .liquid file in your project snippet folder and call it from anywhere:
  {% include 'image' img: product.featured_image %}

  OPTIONS
  img - the image (Shopify image object/image URL as string) **REQUIRED**
  img_alt - override img.alt text (string)
  img_class - add class/es to image (string)
  img_data - add data attribute/s to image (string)
  img_size - Shopify img_url size parameter (string, ignored if img_respond is true)
  img_crop - Shopify crop filter (string, ignored if img_respond is true)
  img_respond - use srcset/sizes, when sizes available (true/false)
  img_respond_widths - custom width set (string, comma-separated numerical sizes)
  img_respond_sizes - flag to use srcset sizes (true/false)

  EXAMPLES
  {% include 'image' img: 'http://placehold.it/320x320' %}
  {% include 'image' img: 'http://placehold.it/320x320', img_alt: 'yeh', img_class: 'class1 class2', img_data: 'data-image data-hero' %}
  {% include 'image' img: product.featured_image, img_size: '200x200' %}
  {% include 'image' img: product.featured_image, img_size: '200x200', img_crop: 'center' %}
  {% include 'image' img: product.featured_image, img_respond: true %}
  {% include 'image' img: product.featured_image, img_respond: true, img_respond_widths: '100,200,300' %}
  {% include 'image' img: product.featured_image, img_respond: true, img_respond_sizes: false %}

  IMPROVEMENTS
  - Allow img_size to work with srcset
  - Allow crop to work with srcset
  - Allow manual image urls for srcset
  - Add picture support

  AUTHORS
  Juan Mingo @shexpire
  Keir Moffatt @iamkeir

{% endcomment %}

{% if img %}

  {% comment %}Vars & defaults{% endcomment %}
  {% assign img_alt = img_alt | default: img.alt %}
  {% assign img_class = img_class | default: blank %}
  {% assign img_data = img_data | default: blank %}
  {% assign img_size = img_size | default: 'master' %}
  {% assign img_crop = img_crop | default: false %}
  {% assign img_respond = img_respond | default: false %}
  {% assign img_respond_widths = img_respond_widths | default: '320,480,640,768,1024,1200,1400,3000' %}
  {% assign img_respond_sizes = img_respond_sizes | default: true %}

  {% comment %}Generate image src{% endcomment %}
  {% capture imgSrc %}{% if img.src %}{{ img.src | img_url: img_size, crop: img_crop }}{% else %}{{ img }}{% endif %}{% endcapture %}

  {% comment %}Build srcset data{% endcomment %}
  {% if img_respond %}
    {% assign imgRespondMode = 'max-width' %}
    {% assign imgRespondWidths = img_respond_widths | split: ',' %}

    {% for respondWidthStr in imgRespondWidths %}
      {% assign respondWidth = respondWidthStr | plus: 0 %}
      {% if img.width >= respondWidth %}

        {% comment %}Build srcset{% endcomment %}
        {% capture imgUrlWidth %}{% if respondWidth >= 3000 %}master{% else %}{{ respondWidth | append: 'x' }}{% endif %}{% endcapture %}
        {% capture imgSrcset %}{{ imgSrcset }}{{ img.src | img_url: imgUrlWidth, crop: img_crop }} {{ respondWidth | append: 'w' }},{% endcapture %}

        {% comment %}Build srcset sizes{% endcomment %}
        {% if img_respond_sizes == true %}
          {% if img.width == respondWidth or forloop.last %}
            {% comment %}If last available size, min-width and up{% endcomment %}
            {% capture imgSrcsetSizes %}{{ imgSrcsetSizes }}{{ respondWidth }}px{% endcapture %}
            {% break %}
          {% else %}
            {% capture imgSrcsetSizes %}{{ imgSrcsetSizes }}(max-width: {{ respondWidth | append: 'px' }}) {{ respondWidth | append: 'px' }},{% endcapture %}
          {% endif %}
        {% endif %}

      {% endif %}
    {% endfor %}
  {% endif %}

  {% comment %}Output image{% endcomment %}
  <img
    src="{{ imgSrc }}"
    alt="{{ img_alt | escape }}"
    class="{{ img_class }}"
    {{ img_data }}
    {% if imgSrcset %}srcset="{{ imgSrcset }}"{% endif %}
    {% if imgSrcsetSizes %}sizes="{{ imgSrcsetSizes }}"{% endif %}
  />

  {% comment %}Reset vars for next use{% endcomment %}
  {% assign img = blank %}
  {% assign img_alt = blank %}
  {% assign img_class = blank %}
  {% assign img_data = blank %}
  {% assign img_size = blank %}
  {% assign img_crop = blank %}
  {% assign img_respond = blank %}
  {% assign img_respond_widths = blank %}
  {% assign img_respond_sizes = blank %}
  {% assign imgSrcset = blank %}
  {% assign imgSrcsetSizes = blank %}

{% endif %}