Macro for responsive images

img.twig

{### 
 # macros for responsive images
 #
 # https://straightupcraft.com/articles/responsive-images-with-twig-macros
 # https://nystudio107.com/blog/creating-optimized-images-in-craft-cms
 #
 # usage simple: {{ macro_img.responsive(asset) }}
 # usage extra:  {{ macro_img.responsive(assetThumbnail, {alt: 'some thumb', class: ['thumb-class'], {style: 'thumb'}}) }}
#}

{# Class Attribute
 #
 # internal function used by responsive macro
 # returns class='foo bar' or '' 
 # 
 #}
{% macro _classAttr(classes) %}
  {%- if (classes|length) -%}
    class="{{ classes|join(' ') }}"
  {%- endif -%}
{% endmacro %}

{# Responsive Macro
 #
 #
 #}
{% macro responsive(asset, options={}) %}
{% import _self as self %}
  {% set options = {
    alt: asset.title, 
    class: [],
    style: 'default'
  }| merge(options) %}

  {% set transform = {
    mode: 'stretch'
  } %}

  {% set nativeWidth = asset.width %}
  {% set nativeHeight = asset.height %}

  {#
   # Here is where you configure the image styles.
   # You are going to have to modify this for your
   # individual site.
   #
   # config is a hash, where the key is the style,
   # and the value is another hash
   # of srcsetWidths, sizes, and defaultWidth.
   #
   # There should always be a 'default' style.
   # Redefine the 'default' to whatever makes sense
   # for you, and add other styles as needed.
   #
   # srcsetWidths: image widths that should appear
   #   in the srcset.
   # sizes: media queries that specify the widths
   #   of the image at different screen widths.
   #   The first one that matches is used.
   # defaultWidth: image width for the src image
   #   (fallback for browsers that don't understand
   #   srcset)
   #}

  {% set newClass = '' %}
  {% if (nativeWidth > nativeHeight) %}
    {% set newClass = 'landscape' %}
  {% else %}
    {% set newClass = 'portrait' %}
  {% endif %}

  {% set newClassArray = [newClass] %}
  {% if (options.class|length) %}
    {% set newClassArray = [newClass, options.class|join('')] %}
  {% endif %}

  {% set options = options|merge({
    'class': newClassArray
  }) %}

  {% set transformedWebPImages = '' %}

  {% if craft.imager.serverSupportsWebp() %}
    {% set transformedWebPImages = craft.imager.transformImage(asset,
        [
          { width: 1500 },
          { width: 450 }
        ],
        {
          format: 'webp',
          allowUpscale: false,
          mode: 'crop',
          webpQuality: 94,
          interlace: true
        }
    ) %}
  {% endif %}

  {% set transformedImages = craft.imager.transformImage(asset,
      [
        { width: 1500 },
        { width: 1280 },
        { width: 450 }
      ],
      {
        format: 'jpg',
        allowUpscale: false,
        mode: 'crop',
        jpegQuality: 94,
        interlace: true
      }
  ) %}

  <section class="placeholder">
    <picture {{ self._classAttr(options.class) }} >
  
    {% if (transformedWebPImages|length) %}
    <source media="(min-width: 1281px)" srcset="{{ transformedWebPImages[0].url }}" type="image/webp">
    <source media="(max-width: 450px)" srcset="{{ transformedWebPImages[1].url }}" type="image/webp">
    {% endif %}
        
    <source media="(min-width: 1281px)" srcset="{{ transformedImages[0].url }}" type="image/jpeg">
    <source media="(min-width: 451px)" srcset="{{ transformedImages[1].url }}" type="image/jpeg">
    <source media="(max-width: 450px)" srcset="{{ transformedImages[2].url }}" type="image/jpeg">
    
    {% if (not options.lazy is defined) %}
    <img src="{{ transformedImages[1].url }}" alt="{{options.alt}}">
    {% endif %}

    </picture>
    <section class='intrinsic-placeholder' style='padding-bottom: {{ nativeHeight / nativeWidth * 100 }}%'></section>
  </section>
{% endmacro %}