image helper macro.twig

{#
  Image Helper
  ------------------------------------------------------------

  {% import '_macros/_macro-imageHelper.twig' as image  %}
#}

{% apply spaceless %}
  {# Get Image Extension #}
  {%- macro getImageExtension(image) -%}
    {%- if image ??? null -%}
      {%- if image is iterable -%}
        {{- image.extension | lower -}}
      {%- else -%}
        {{- image | split('.') | last | lower -}}
      {%- endif -%}
    {%- endif -%}
  {%- endmacro -%}



  {# Get Image Extension #}
  {%- macro isTransformable(image) -%}
    {%- set skipTransformsForThisExtensions = ['gif', 'tiff', 'svg'] -%}
    {%- set extension = _self.getImageExtension(image) -%}
    {%- if extension not in skipTransformsForThisExtensions -%}
      {{- true -}}
    {%- else -%}
      {{- false -}}
    {%- endif -%}
  {%- endmacro -%}



  {# Render Image #}
  {%- macro renderImage(image, transform, lazy = true, objectFit = null, calcDominantColor = false) -%}
    {%- if image ??? null -%}
      {%- set placeholder = _self.getPlaceHolder(image, transform, calcDominantColor) -%}
      {%- set focalpoint = image.getFocalpoint('asCss') -%}
      {%- set imageTitle = image.title -%}
      {%- if _self.isTransformable(image) -%}
        {%- set srcset = _self.getSrcset(image, transform) -%}
        <img class="{{ lazy ? 'lazyload' : '' }}"
          {%- if objectFit -%}
            style="object-fit: {{ objectFit }}; object-position: {{ focalpoint | default('50% 50%') }}"
          {%- endif -%}
             src="{{- placeholder -}}"
          {%- if lazy -%}
            data-srcset="{{- srcset -}}"
            data-sizes="auto"
          {%- else -%}
            srcset="{{- srcset -}}"
            sizes="100vw"
          {%- endif -%}
          {%- if craft.app.config.general.custom.ieSupport -%}
            data-rootimage="{{- craft.imager.transformImage(image, transform)|last.url -}}"
          {%- endif -%}
             alt="{{ imageTitle }}"/>
      {%- else -%}
        {%- set imageUrl = image.getUrl() -%}
        <img class="{{ lazy ? 'lazyload' : '' }}"
          {%- if objectFit -%}
            style="object-fit: {{ objectFit }}; object-position: {{ focalpoint | default('50% 50%') }}"
          {%- endif -%}
          {%- if lazy -%}
            src="{{- placeholder -}}"
            data-src="{{- imageUrl -}}"
            data-sizes="auto"
          {%- else -%}
            src="{{- imageUrl -}}"
            sizes="100vw"
          {%- endif -%}
             alt="{{- imageTitle -}}"/>
      {%- endif -%}
    {%- endif -%}
  {%- endmacro -%}



  {# Render NoScript #}
  {%- macro renderNoScript(image) -%}
    {%- if image ??? null -%}
      <noscript><img src="{{ image.getUrl() }}" alt="{{ image.title }}"/></noscript>
    {%- endif -%}
  {%- endmacro -%}


  {# Render SourceElement #}
  {%- macro renderSourceElement(srcSet, lazy, mediaQuery, type) -%}
    {%- if srcSet -%}
      {%- if lazy -%}
        <source data-sizes="auto"
                data-srcset="{{- srcSet -}}"
          {%- if mediaQuery -%}
            media="{{- mediaQuery -}}"
          {%- endif -%}
          {%- if type -%}
          type="{{- type -}}"
          {%- endif -%}/>
      {%- else -%}
        <source sizes="100vw"
          {%- if mediaQuery -%}
            media="{{- mediaQuery -}}"
          {%- endif -%}
          {%- if type -%}
          type="{{- type -}}"
          {%- endif -%}/>
        srcset="{{- srcSet -}}"/>
      {%- endif -%}
    {%- endif -%}
  {%- endmacro -%}



  {# Render Source #}
  {%- macro renderSource(image, transform, lazy = true, mediaQuery) -%}
    {# Handle WebP Image #}
    {%- if craft.imager.serverSupportsWebp() and image -%}
      {{- _self.renderSourceElement(_self.getSrcset(image, transform, 'webp'), lazy, mediaQuery, 'image/webp') -}}
    {%- endif -%}

    {# Handle normal Image #}
    {%- if image -%}
      {{- _self.renderSourceElement(_self.getSrcset(image, transform), lazy, mediaQuery) -}}
    {%- endif -%}
  {%- endmacro -%}



  {# Get srcSet #}
  {%- macro getSrcset(image, transform, format) -%}
    {%- if image and _self.isTransformable(image) -%}
      {{- craft.imager.srcset(craft.imager.transformImage(image, transform, { format: format | default(null) })) | trim -}}
    {%- else -%}
      {{- image.url -}}
    {%- endif -%}
  {%- endmacro -%}



  {# Get Dominant Color #}
  {%- macro getDominantColor(image, calcDominantColor = false) -%}
    {%- set dominantColor = 'transparent' -%}
    {%- if craft.app.config.general.custom.dominantColor -%}
      {%- set dominantColor = craft.app.config.general.custom.dominantColor -%}
    {%- endif -%}
    {% if calcDominantColor and not craft.app.config.general.custom.localDevPerformance and not image.extension | lower == 'png' and _self.isTransformable(image) %}
      {# Create Mini Image for Dominant Color #}
      {%- set image = craft.imager.transformImage(image, 'dominantColor')|first -%}
      {%- set dominantColor = craft.imager.getDominantColor(image) -%}
    {% endif %}
    {{- dominantColor -}}
  {%- endmacro -%}



  {# Get Placeholder #}
  {%- macro getPlaceHolder(image, transform, calcDominantColor = false) -%}
    {%- if image -%}
      {%- if _self.isTransformable(image) -%}
        {%- set transformedImage = craft.imager.transformImage(image, transform)|first -%}
        {{- craft.imager.placeholder({
          color: _self.getDominantColor(transformedImage, calcDominantColor),
          width: transformedImage.width,
          height: transformedImage.height
        }) -}}
      {%- else -%}
        {{- craft.imager.placeholder({
          color: 'transparent',
          width: image.width,
          height: image.height,
        }) -}}
      {%- endif -%}
    {%- endif -%}
  {%- endmacro -%}
{%- endapply -%}