image

// src/components/elements/image/image.html.twig

{% set is_lazy = not is_eager %}
{% set base64_src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" %}
{% set placeholder_src = is_lazy ? base64_src : src %}

{% set placeholder_image %}
  <img
    class="Image{% if is_lazy %} is-lazy{% endif %}"
    src="{{ placeholder_src }}"
    {% if is_lazy %}data-src="{{ src }}"{% endif %}
    alt="{{ alt }}"
    {% if fetchpriority %}fetchpriority="{{ fetchpriority }}"{% endif %}
  >
{% endset %}

{% set no_script %}
  <noscript>
    <img class="Image" src="{{ src }}" alt="{{ alt }}">
  </noscript>
{% endset %}

{% set modifier = 'FlexEmbed-ratio--' ~ id %}

{%- set default_style -%}
  .{{ modifier }} {
    {{- "padding-bottom:" ~ height / width * 100 ~ "% !important;" -}}
  }
{%- endset -%}

{%- set style = "" -%}

{% if sources is not empty %}
  {% set img %}
    {{ no_script }}
    <picture>
      {% for source in sources %}
        {% set srcset = is_lazy ? placeholder_src : source.srcset %}
        {# quickfix to add type for webp sources, to enable legacy browser to ignore them #}
        <source
          {% if "webp" in source.srcset %}type="image/webp"{% endif %}
          srcset="{{ srcset }}"
          {% if is_lazy %}data-srcset="{{ source.srcset }}"{% endif %}
          media="{{ source.media }}"
        >
        {%- set style_media -%}
          {%- if source.height and source.width and not ("webp" in source.srcset) -%}
            @media {{ source.media }} {.{{ modifier }} {
              {{- "padding-bottom:" ~ source.height / source.width * 100 ~ "% !important;" -}}
            }}
          {%- endif -%}
        {%- endset -%}
        {%- set style = style_media ~ style -%}
      {% endfor %}
      {%- set style = default_style ~ style -%}
      {{ placeholder_image }}
      {% include "@elements/image/image-script.html.twig" with {style: style} only %}
    </picture>
  {% endset %}
{% else %}
  {% set img %}
    {{ placeholder_image }}
    {% include "@elements/image/image-script.html.twig" with {style: default_style} only %}
    {{ no_script }}
  {% endset %}
{% endif %}

{% include "@elements/flex-embed/flex-embed.html.twig" with {
  "content": img,
  "modifier": modifier,
} only %}