Craft macro to centralize the markup and config for responsive images

img.html

{# ================================================================== #}
{# ================================================================== #}
{# Responsive Images
{# ================================================================== #}
{# ================================================================== #}
{# 
   {% import '_macros/img' as macroImg %}
   Macro to centralize the markup and config for responsive images. 
   
   Based on an article by Marion Newlevant (@marionnewlevant) and 
   adapted for the Lazysizes plugin. Read more: 
   https://straightupcraft.com/articles/responsive-images-with-twig-macros
   
   Relies on the following Craft plugins:
   Imager: https://github.com/aelvan/Imager-Craft
   FocusPoint: https://github.com/smcyr/Craft-FocusPoint
{# ================================================================== #}



{# ================================================================== #}
{# Imager Url
{# ================================================================== #}

{# {{ macroImg.imagerUrl(image, width, height) }}
{# Uses imager plugin to generate image url with optional focal point.  
{# ------------------------------------------------------------------ #}
{% macro imagerUrl(image, width, height) %}
   {% set transformedImage = craft.imager.transformImage(image, { width: width, height: height, position: image.focalPoint | default('50% 50%') }) %}
   {{ transformedImage.url }}
{% endmacro %}



{# ================================================================== #}
{# Imager Srcset
{# ================================================================== #}

{# {{ macroImg.imagerSrcset(image, 'img-classes', 'image type') }}
{# Uses Imager plugin to generate lazysizes friendly srcset markup.
{# ------------------------------------------------------------------ #}
{% macro imagerSrcset(image, classes="", imageType=null, effectType=null) %}
   {% set imageRatioWidth = null %}
   {% set imageRatioHeight = null %}

   {# If necessary, define effects #}
   {% switch effectType %}
      {% case 'greyscale' %}
         {% set effectsArray = { grayscale: true, contrast: 0 } %}
      {% default %}
         {% set effectsArray = { } %}
   {% endswitch %}

   {# Define transform settings based on image type #}
   {% switch imageType %}
      {% case '1x1' %}
         {% set imageRatioWidth = 1 %}
         {% set imageRatioHeight = 1 %}
         {% set mode = 'crop' %}
         {% set imageSizes = [ 
           { width: 1200 }, 
           { width: 900 }, 
           { width: 600 }
         ] %}

      {% case 'gallery' %}
         {% set imageRatioWidth = 2 %}
         {% set imageRatioHeight = 1.12 %}
         {% set mode = 'crop' %}
         {% set imageSizes = [ 
           { width: 2000 },
           { width: 1600 },
           { width: 1000 },
           { width: 600 }
         ] %}

      {% case 'headshot' %}
         {% set imageRatioWidth = 1 %}
         {% set imageRatioHeight = 1 %}
         {% set mode = 'crop' %}
         {% set imageSizes = [ 
           { width: 600 }, 
           { width: 400 }, 
           { width: 300 }
         ] %}

     {% case 'tall' %}
         {% set imageRatioWidth = 1 %}
         {% set imageRatioHeight = 1.75 %}
         {% set mode = 'crop' %}
         {% set imageSizes = [ 
           { width: 1100 },
           { width: 700 },
           { width: 500 }
         ] %}

     {% case 'thumb' %}
         {% set imageRatioWidth = 1 %}
         {% set imageRatioHeight = 1.14 %}
         {% set mode = 'crop' %}
         {% set imageSizes = [ 
           { width: 800 },
           { width: 500 }
         ] %}

      {% default %}
         {% set imageRatioWidth = 1 %}
         {% set imageRatioHeight = 0.76 %}
         {% set mode = 'fit' %}
         {% set imageSizes = [ 
           { width: 1600 }, 
           { width: 1200 }, 
           { width: 800 }, 
           { width: 500 }
         ] %}
   {% endswitch %}

   {# Set Srcset Transform #}
   {% set transformedImages = craft.imager.transformImage(image, imageSizes, { mode: mode, ratio: imageRatioWidth/imageRatioHeight, letterbox: { color: '#c5bfaf' }, effects: effectsArray, position: (image.focusPctX ?? '50') ~ '% ' ~ (image.focusPctY ?? '50') ~ '%', jpegQuality: 85 }) %}

   {# Output lazysizes srcset markup #}
   <img class="{{ classes }} lazyload" alt="" src="{{ craft.imager.base64Pixel(imageRatioWidth, imageRatioHeight) }}" data-sizes="auto" data-srcset="{{ craft.imager.srcset(transformedImages) }}">
   

{% endmacro %}