Image

{% apply spaceless %}
  {# Prop: classes (array) #}
  {% if classes and classes is iterable %}
    {% set defaultClasses = classes|merge(['azalea-alt-text-sr-only']) %}
  {% else %}
    {% set defaultClasses = [
      'azalea-alt-text-sr-only',
      'max-w-full',
      'mx-auto'
    ] %}
  {% endif %}
  {% set containerClasses = [] %}
  {# Prop: maxHeight #}
  {% if maxHeight is defined and maxHeight in ['screen', 'min', 'max', 'fit', 'full'] %}
    {# add class: max-h-screen, max-h-min, max-h-max, max-h-fit, max-h-full #}
    {% set defaultClasses = defaultClasses|merge(['max-h-' ~ maxHeight]) %}
  {% endif %}
  {# Prop: height #}
  {% if height is defined and height in ['auto', 'screen', '1/4', '1/3', '1/2', '3/4', '3/5', 'fit', 'full'] %}
    {# add class: h-auto, h-screen, h-1/4, h-1/3, h-1/2, h-3/4, h-3/5, h-fit, h-full #}
    {% set containerClasses = containerClasses|merge(['h-' ~ height]) %}
  {% endif %}
  {# Prop: width #}
  {% if width is defined and width in ['auto', 'full', '1/2'] %}
   {# add class: w-auto, w-full, w-1/2  #}
    {% set containerClasses = containerClasses|merge(['w-' ~ width]) %}
  {% endif %}
  {# Prop: fit #}
  {% if fit is defined and fit in ['contain', 'cover', 'fill', 'none'] %}
     {# add class: object-fit, object-cover, object-fill, or object-none #}
    {% set defaultClasses = defaultClasses|merge(['object-' ~ fit]) %}
  {% endif %}
  {# Prop: items #}
  {% if items is defined and items in ['center', 'start', 'end'] %}
     {# add class: items-center, items-start, items-end #}
    {% set containerClasses = containerClasses|merge(['flex', 'items-' ~ items]) %}
  {% endif %}
  {# Prop: lazy (boolean) #}
  {% if lazy is not defined %}
    {% set lazy = 1 %}
  {% endif %}
  {# Prop: rounded (boolean) #}
  {% if rounded is defined %}
    {% set defaultClasses = defaultClasses|merge(['rounded-sm']) %}
  {% endif %}
  {#
    Prop: use
    Use a specific size instead of srcset.
  #}
  {% set sizes = [
    'small',
    'small_square',
    'small_video',
    'medium',
    'medium_sqare',
    'medium_video',
    'large',
    'xlarge',
    'default'
  ] %}
  {% if data.mimeType %}
    {% set imageFormat = 'jpg' %}
    {% if data.mimeType == 'image/png' %}
      {% set imageFormat = 'png' %}
    {% elseif data.mimeType == 'image/gif' %}
      {% set imageFormat = 'gif' %}
    {% endif %}
  {% else %}
    {# If Mime Type information is not available use the first available format. #}
    {% set imageFormat = '' %}
    {% for key, value in data.sizes %}
      {% if loop.first %}
        {% set imageFormat = key %}
      {% endif %}
    {% endfor %}
  {% endif %}
  {% if use and use in sizes %}
    {# Use the supplied size for src #}
    {% set src = data.sizes[imageFormat][use] ? data.sizes[imageFormat][use] : data.sizes[imageFormat]['default'] %}
  {% else %}
    {# Use the 'default' size for src. #}
    {% set src = data.sizes[imageFormat]['default'] %}
  {% endif %}
  <picture class="{{ containerClasses|join(' ') }}"{% if data.longDescription %} aria-describedby="image-{{ data.metadata.id }}-description"{% endif %}>
    {# Output each format (jpg, webp) as a source #}
    {% for format, sizes in data.sizes %}
      {% set srcset %}
        {%- if sizes.small is not empty %}
          {{- sizes.small }} 640w,
        {% endif %}
        {% if sizes.medium is not empty %}
          {{- sizes.medium }} 768w,
        {% endif %}
        {% if sizes.large is not empty %}
          {{- sizes.large }} 1024w,
        {% endif %}
        {% if sizes.xlarge is not empty %}
          {{- sizes.xlarge }} 1280w
        {% endif %}
      {% endset %}
      {%- if srcset|trim is not empty and not use -%}
        {% set mimeType = format == 'jpg' ? 'image/jpeg' : 'image/' ~ format %}
        <source type="{{ mimeType }}" srcset="{{ srcset|trim }}" sizes="100vw">
      {%- endif -%}
    {% endfor %}
    {# The fallback source #}
    <img
      class="{{ defaultClasses|join(' ') }}"
      src="{{ src }}"
      {%- if data.title -%}
        title="{{ title }}"
      {%- endif -%}
      alt="{{ data.alt }}"
      {%- if lazy -%}
        loading="lazy"
      {%- endif -%}
      {%- if priority -%}
        fetchpriority="{{ priority }}"
      {%- endif -%}
    />
  </picture>
  {% if data.longDescription %}
    <div id="image-{{ data.metadata.id }}-description" class="sr-only">
      {{ data.longDescription|raw }}
    </div>
  {% endif %}
{% endapply %}