{% macro imageLayout(responsiveImg, flip, imgLayout, customimgLayout, customSize,imgSrcCustomSize, imgSrcSmall, imgSrcMedium, imgSrcLarge, path,imgClass, extraText ) %}

<!-- imgLayout = null || img--hero || img--layout -->
<div class="img 
            {% if( imgLayout == 'hero')%} img--hero  {% endif %}
            {% if( imgLayout == 'layout') %} img--layout {% endif %}
            {% if( imgLayout == 'frame') %} img--frame {% endif %}
            {{customimgLayout}}
            {% if(flip) %} img__flip {% endif %}
            ">

    <!-- TODO: add option with text -->

    {% if responsiveImg %}
    <picture>
    {% endif %}

        {% if customSize %}
            <source type="image/webp" media="(max-width: {{customSize}})" srcset="{{path}}/{{imgSrcCustomSize}}.webp?format=webp">   
            <source type="image" media="(max-width: {{customSize}})" srcset="{{path}}/{{imgSrcCustomSize}}?format=webp">   
        {% endif %}    
        {% if imgSrcSmall %}
            <source type="image/webp" media="(max-width: 767px)" srcset="{{path}}/{{imgSrcSmall}}.webp?format=webp">
            <source type="image" media="(max-width: 767px)" srcset="{{path}}/{{imgSrcSmall}}?format=webp">
        {% endif %}
        {% if imgSrcLarge %}
            <source type="image/webp" media="(min-width: 768px) (max-width: 820px)" srcset="{{path}}/{{imgSrcLarge}}.webp?format=webp">
            <source type="image" media="(min-width: 768px) (max-width: 820px)" srcset="{{path}}/{{imgSrcLarge}}?format=webp">
        {% endif %}  
           
        <img {% if(responsiveImg) %} data-src {% else %} src {% endif %} ="{{path}}/{{imgSrcLarge}}?format=webp" alt="{{imgAlt}}" class="{% if(imgClass) %} {{imgClass}} {% endif %} lazyload">

    {% if responsiveImg %}
    </picture>
    {% endif %}

    {% if extraText %}
        {{extraText}}
    {% endif %}
</div>

{% endmacro %}