{% set breakpoints = {
    xs: 1,
    sm: 480,
    md: 768,
    lg: 1024,
    xl: 1280,
    xxl: 1600,
    xxxl: 1920
} %}
{# wordpress image id (does not apply for videos) %}
{% will resize automatically based on configuration #}
{% set resizeConfig = resizeConfig|default({
    xs: [640, 640],
    xl: [800, 800],
    xxl: [1024, 1024]
}) %}
{# aspect ratio (square, portrait, landscape, landscape-video) #}
{% set classes = aspectRatio ? classes ~ ' aspect-ratio aspect-ratio--' ~ aspectRatio : classes %}
{% set classes = isFitContain ? classes ~ ' is-fit-contain' : classes %}
{% set classes = isFitCover ? classes ~ ' is-fit-cover' : classes %}

{% if isButtonChild %}
<span class="media media-image {{ classes }}" {{ params }}>
{% else %}
<div class="media media-image {{ classes }}" {{ params }}>
{% endif %}
    <picture>
        {% if wordpressId and resizeConfig and scaleByHeight %}
            {# if wordpressId exists and configuration is defined, dynamically create breakpoints #}
            {# save smallest image size for default load #}
            {% set imageSizeSmallest = [] %}
            {# create source elements for each breakpoint #}
            {% for key, breakpoint in breakpoints|reverse %}
                {% if resizeConfig[key]|default("") %}
                    {% set imageSize = resizeConfig[key] %}
                    <source media="(min-width: {{ breakpoint }}px)" srcset="{{ get_image(wordpressId).src ~ '?height=' ~ imageSize[0] }}&quality=75">
                    {% set imageSizeSmallest = imageSizeSmallest|length == 0 or imageSize[0] < imageSizeSmallest[0] ? imageSize : imageSizeSmallest %}
                {% endif %}
            {% endfor %}
            {# default #}
            <img src="{{ get_image(wordpressId).src ~ '?height=' ~ imageSizeSmallest[0] }}&quality=75" alt="{{ alt|default(get_image(wordpressId).alt) }}" class="{{ imageClasses }}" {{ imageParams }} {% if not disableLazyLoad %}loading="lazy"{% endif %}/>
        {% elseif wordpressId and resizeConfig %}
            {# if wordpressId exists and configuration is defined, dynamically create breakpoints #}
            {# save smallest image size for default load #}
            {% set imageSizeSmallest = [] %}
            {# create source elements for each breakpoint #}
            {% for key, breakpoint in breakpoints|reverse %}
                {% if resizeConfig[key]|default("") %}
                    {% set imageSize = resizeConfig[key] %}
                    <source media="(min-width: {{ breakpoint }}px)" srcset="{{ get_image(wordpressId).src ~ '?width=' ~ imageSize[0] }}&quality=75">
                    {% set imageSizeSmallest = imageSizeSmallest|length == 0 or imageSize[0] < imageSizeSmallest[0] ? imageSize : imageSizeSmallest %}
                {% endif %}
            {% endfor %}
            {# default #}
            <img src="{{ get_image(wordpressId).src ~ '?width=' ~ imageSizeSmallest[0] }}&quality=75" alt="{{ alt|default(get_image(wordpressId).alt) }}" class="{{ imageClasses }}" {{ imageParams }} {% if not disableLazyLoad %}loading="lazy"{% endif %}/>
        {% else %}
            {# manual image sizes #}
            {% if srcXL %}
                <source media="(min-width: 1600px)" srcset="{{ srcXL }}">
            {% endif %}
                <source media="(min-width: 1024px)" srcset="{{ src }}">
            {% if srcTablet %}
                <source media="(min-width: 480px)" srcset="{{ srcTablet }}">
            {% endif %}
            {% if srcMobile %}
                <source media="(max-width: 479px)" srcset="{{ srcMobile }}">
            {% endif %}
            <img src="{{ src }}" alt="{{ alt }}" class="{{ imageClasses }}" {{ imageParams }} {% if not disableLazyLoad %}loading="lazy"{% endif %}/>
        {% endif %}
    </picture>
{% if isButtonChild %}
</span>
{% else %}
</div>
{% endif %}