Background Image

{% import '@macro-img' as img %}

{% set uid = random(999) %}
{% set dataUid = dataUid|default(random(999)) %}

{% block main %}
    {% spaceless %}
        {% if item.background_image[0] %}
            {% set backgroundImageObject = item.background_image[0] %}

            {% set backgroundImageIdentifier = 'carousel-backgroundimage-'
                ~ dataUid
                ~ '-'
                ~ uid
            %}

            {% set backgroundImageClasses = ['carousel-backgroundimage'] %}
            {% if item.data.background_image_options.parallax %}
                {% set backgroundImageClasses =
                    backgroundImageClasses|merge(
                        ['carousel-backgroundimage-parallax']
                    )
                %}
            {% endif %}
            {% if item.data.background_image_options.fade %}
                {% set backgroundImageClasses =
                    backgroundImageClasses|merge(
                        ['carousel-backgroundimage-fade']
                    )
                %}
            {% endif %}
            {% if item.data.background_image_options.filter %}
                {% set backgroundImageClasses =
                    backgroundImageClasses|merge(
                        [
                            'carousel-backgroundimage-'
                                ~ item.data.background_image_options.filter
                        ]
                    )
                %}
            {% endif %}

            {# holderjs special #}
            {% if
                backgroundImageObject.holder.width
                    and backgroundImageObject.holder.height
                    and not backgroundImageObject.url %}
                {% set backgroundImageClasses =
                    backgroundImageClasses|merge(['holderjs'])
                %}
                {% set holder = ' data-background-src="?'
                    ~ img.src(backgroundImageObject)
                    ~ '"'
                %}
            {% endif %}

            <div class="carousel-backgroundimage-container">
                <div id="{{ backgroundImageIdentifier }}"
                    class="{{ backgroundImageClasses|join(' ') }}"
                    {{ holder }}>
                    {% set styles = '' %}
                    {# {% for variant in variants %}
                <f:variable name="breakpoint">{variant.breakpoint as integer}</f:variable>
                <f:variable name="width">{variant.width as integer}</f:variable>
                <f:if condition="{width} && {variant.sizes}">
                    <f:variable name="variantStyle" value=""/>
                    <f:for each="{variant.sizes}" key="sizeKey" as="sizeConfig" iteration="iteration">
                        <f:variable name="sizeWidth">{sizeConfig.multiplier as float}</f:variable>
                        <f:variable name="sizeWidth">{sizeWidth * width}</f:variable>
                        <f:variable name="sizeDppx">{sizeKey as float}</f:variable>
                        <f:variable name="mediaBreakpoint"><f:if condition="{breakpoint}">(min-width: {breakpoint}px)</f:if></f:variable>
                        <f:variable name="mediaQuery" value=""/>
                        <f:if condition="{mediaBreakpoint}">
                            <f:variable name="mediaQuery">{mediaBreakpoint}</f:variable>
                        </f:if>
                        <f:if condition="{sizeDppx} > 1">
                            <f:variable name="mediaQuery">(-webkit-min-device-pixel-ratio: {sizeDppx})<f:if condition="{mediaBreakpoint}"> and {mediaBreakpoint}</f:if></f:variable>
                            <f:variable name="mediaQuery">{mediaQuery}, (min-resolution: {sizeDppx}dppx)<f:if condition="{mediaBreakpoint}"> and {mediaBreakpoint}</f:if></f:variable>
                        </f:if>
                        <f:variable name="variantStyle">{variantStyle} <f:if condition="{mediaQuery}">@media {mediaQuery} { </f:if>#{backgroundImageIdentifier} { background-image: url('{f:uri.image(image: backgroundImageObject, cropVariant: name, maxWidth: sizeWidth)}'); }<f:if condition="{mediaQuery}"> }</f:if></f:variable>
                    </f:for>
                    <f:variable name="styles" value="{variantStyle -> bk2k:format.trim()} {styles}"/>
                </f:if>
            {% endfor %} #}

                    {% if backgroundImageObject.url %}
                        {% set styles = '#' ~ backgroundImageIdentifier
                            ~ '{ background-image: url('
                            ~ img.src(backgroundImageObject)
                            ~ '); }'
                        %}

                        <style>
                            {{ styles }}
                        </style>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    {% endspaceless %}
{% endblock %}