lazy-image-picture.liquid

{%- comment -%}
  Lazyload/Lazysizes responsive picture snippet
  Author: Eric Hayes
  Version: 2.1
  -------------------------------------

  Requires:
  image: {Obect} Desktop image object setting variable
  Accepts:
  image_container: {Boolean} Use an image container with padding for intrinsic size
  image_tablet: {Obect} Tablet image object setting variable.
  image_mobile: {Obect} Mobile image object setting variable
  class: {String} the class to apply to the image
  progressive: {Boolean} convert image to .pjpg (https://en.wikipedia.org/wiki/JPEG#JPEG_compression)
  blur_up: {Boolean} Load a low resolution placeholder
  It's replaced with larger image after load. Use '1x' to show primary color and higher for blurred image

  Dependencies:
  - Lazysizes plugin (https://github.com/aFarkas/lazysizes) which enable responsive image with faster load time and better performance.
  - lazySizes parent fit extension (https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/parent-fit)
  - lazySizes RIaS extension (https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias)
  - lazysizes.scss

  Usage:
{% render 'lazy-image-picture',image: section.settings.image,image_tablet: section.settings.image_tablet, image_mobile: section.settings.image_mobile %}

{%- endcomment -%}

{%- comment -%}
  Defaults
{%- endcomment -%}

{% assign image_container = image_container | default: true %}
{% assign max_width = image.width %}
{% assign blur_size = max_width | divided_by: 10 | append: 'x' %}
{% assign size = size | default: blur_width %}
{% assign blur_up = blur_up | default: false %}
{% assign image_id = '#Image' | append: image.id %}
{% assign progressive = progressive | default: false %}
{% assign extension = image.src | split: '.' | last %}
{% assign format = extension %}

{%- comment -%}
  Responsive Sizes
{%- endcomment -%}
{% assign tablet = 768 %}
{% assign desktop = 1080 %}
{% assign mobile = tablet |  minus: 1 %}
{% assign tablet_max = desktop |  minus: 1 %}

{% assign mobile_exists = false %}
{% assign tablet_exists = false %}
{% if image_mobile.width > 0 %}
  {% assign mobile_exists = true %}
{% endif %}
{% if image_tablet.width > 0 %}
  {% assign tablet_exists = true %}
{% endif %}

{%- assign image_widths = '[180,360,540,720,900,1080,1296,1512,1728,1944,2160,2376,2592,2808,3024]' -%}

{%- if mobile_exists -%}
  {% assign img_url_mobile = image_mobile  %}
{%- else -%}
  {% assign img_url_mobile = image  %}
{%- endif -%}

{%- if tablet_exists -%}
  {% assign img_url_tablet = image_tablet  %}
{%- else -%}
  {% assign img_url_tablet = image %}
{%- endif -%}

{% if image_container %}
<style>
  @media screen and (max-width: {{ mobile }}px) {
    {{ image_id }} {
      padding-bottom: {{ img_url_mobile.height  | times: 1.0 | divided_by: img_url_mobile.width | times: 100 }}%;
    }
  }
  @media screen and (min-width: {{ tablet }}px) {
    {{ image_id }} {
      padding-bottom: {{ img_url_tablet.height | times: 1.0 | divided_by: img_url_tablet.width | times: 100 }}%;
    }
  }
  @media screen and (min-width: {{ desktop }}px) {
    {{ image_id }} {
      padding-bottom: {{ image.height | times: 1.0 | divided_by: image.width | times: 100 }}%;
    }
  }
</style>
{% endif %}

{% if progressive %}
  {% assign image_url_mobile = img_url_mobile | img_url: '1x1', format: 'pjpg' | replace: '_1x1', '_{width}x' %}
  {% assign image_url_tablet = img_url_tablet | img_url: '1x1', format: 'pjpg' | replace: '_1x1', '_{width}x' %}
  {% assign image_url_desktop = image | img_url: '1x1', format: 'pjpg' | replace: '_1x1', '_{width}x' %}
{% else %}
  {% assign image_url_mobile = img_url_mobile | img_url: '1x1' | replace: '_1x1', '_{width}x' %}
  {% assign image_url_tablet = img_url_tablet | img_url: '1x1' | replace: '_1x1', '_{width}x' %}
  {% assign image_url_desktop = image | img_url: '1x1' | replace: '_1x1', '_{width}x' %}
{% endif %}

{% capture picture %}
  <picture>
    <!--[if IE 9]>
    <video style="display: none;><![endif]-->
    <source
      data-src="{{ image_url_mobile }}"
      data-aspectratio="{{ image_mobile.aspect_ratio }}"
      media="(max-width: {{ mobile }}px)"/>
    <source
      data-src="{{ image_url_tablet }}"
      data-aspectratio="{{ image_tablet.aspect_ratio }}"
      media="(min-width: {{ tablet }} and max-width: {{ tablet_max }}px)"/>
    <source
      data-src="{{ image_url_desktop }}"
      data-aspectratio="{{ image.aspect_ratio }}"/>
    <!--[if IE 9]></video><![endif]-->
    <img
      class="lazyload {% if blur_up %}blur-up{% endif %} {{ class }}"
      {% if blur_up %}
        data-src="{{ image | size }}"
      {% else %}
        data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
      {% endif %}
      data-widths="{{ image_widths }}"
      data-sizes="auto"
      data-extension="{{ extension }}"
      data-format="{{ format }}"
      alt="{{ image.alt }}"/>
  </picture>
{% endcapture %}

{% if image_container %}
  <div id="{{ image_id | replace: '#', '' }}" class="lazy__container">
    {{ picture }}
  </div>
{% else %}
  {{ picture }}
{% endif %}