{#
########################################################
    macro: responsive image/background-image
########################################################
#}

{# Set Attributes
    {% set attr = {
        image: ,
        class: '',
        sizes: [
            { width: 1680 },
            { width: 960 },
            { width: 480 }
        ],
        style: 'img',
        quality: 80,
        mode: 'crop',
        position: '',
        ratio: '',
        caption: '',
        dominantColor: '',
        effects: {},
    } %}

    {{ img.resImage(attr) }}
#}


{% macro resImage(attr) %}

    {# Set Defaults #}
    {% set defaults = {
        image: '',
        class: 'c-img',
        sizes: [
            { width: 1680 },
            { width: 960 },
            { width: 480 }
        ],
        style: 'img',
        quality: 80,
        mode: 'crop',
        position: '',
        ratio: '',
        caption: '',
        dominantColor: '',
        effects: {},
    } %}

    {# Merge Attr with Defaults #}
    {% set attr = attr ? defaults|merge(attr) : defaults %}

    {# Set Ratio #}
    {% if attr.ratio %}
        {% set ratio = attr.ratio|split(':') %}
        {% set base64Ratio = attr.ratio|split(':') %}
        {% set ratio = ratio|first/ratio|last %}
    {% else %}
        {% set imageSize = attr.image.width ~ ':' ~ attr.image.height %}
        {% set base64Ratio = imageSize|split(':') %}
        {% set ratio = '' %}
    {% endif %}

    {# Set Position #}
    {% if attr.position|length %}
        {% set position = attr.position %}
    {% else %}
        {% set position = attr.image.imgFocalPoint %}
    {% endif %}

    {# Define global variables #}
    {% set imageSettings = {
    jpegQuality: attr.quality,
    mode: attr.mode,
    position: position,
    ratio: ratio,
    effects: attr.effects
    } %}

    {# Image #}
    {% if attr.image %}
        {% set images = craft.imager.transformImage(attr.image, attr.sizes, imageSettings) %}

        {# Set Dominant Color #}
        {% if attr.dominantColor|length %}
            {% set dominantColor = attr.dominantColor %}
        {% elseif attr.image.imgDominantColor is defined %}
            {% set dominantColor = attr.image.imgDominantColor %}
        {% else %}
            {% set dominantColor = '' %}
        {% endif %}

        {% if attr.style == 'img' %}
            <figure class="{{ attr.class }}" style="background-color: {{ dominantColor }}; ">
                <img class="lazyload  {{ attr.class ~ '__image' }}"
                     src="{{ images|last.url }}"
                     srcset="{{ craft.imager.base64Pixel(base64Ratio|first, base64Ratio|last) }}"
                     data-srcset="{{ craft.imager.srcset(images) }}"
                     data-sizes="auto"
                     alt="{{ attr.image.title }}" />
                {% if attr.caption|length %}
                    <figcaption>
                        {{ attr.caption|raw }}
                    </figcaption>
                {% endif %}
            </figure>

        {% else %}
            <figure class="{{ attr.ratio | length ? 'o-ratio  o-ratio--' ~ attr.ratio : '' }} {{ attr.class }}"
                    style="background-color: {{ dominantColor }};">
                <div class="lazyload"
                     style="background-image: url('{{ craft.imager.base64Pixel(base64Ratio|first, base64Ratio|last) }}');
                             background-position: {{ position }};
                     {{ not attr.ratio | length ? 'padding-bottom:' ~ images[0].height / images[0].width * 100 ~ '%;' : '' }}
                             background-color: {{ dominantColor }};"
                     data-bgset="{{ craft.imager.srcset(images) }}"
                     data-sizes="auto">
                </div>
            </figure>

        {% endif %}
    {% endif %}
{% endmacro %}