{namespace media=Neos\Media\ViewHelpers}
{namespace neos=Neos\Neos\ViewHelpers}

<f:alias
    map="{
        smallImage: '{neos.media:uri.image(image: image, maximumWidth: 375) -> f:if(condition: image)}',
        mediumImage: '{neos.media:uri.image(image: image, maximumWidth: 480) -> f:if(condition: image)}',
        largeImage: '{neos.media:uri.image(image: image, maximumWidth: 800) -> f:if(condition: image)}',
        fullImage: '{neos.media:uri.image(image: image) -> f:if(condition: image)}'
    }">

    <f:if condition="{neos:rendering.inBackend()}">
        <f:then>
            <div class="o-grid__item m-0 p-0">
                <img src="{fullImage}" alt="{alternativeText}" />
            </div>
        </f:then>
        <f:else>
            <a
                data-toubiz-gallery-item
                href="{fullImage}"
                data-responsive="{smallImage} 375, {mediumImage} 480, {largeImage} 800"
                data-sub-html="{caption}"
                class="tb-swiper__slide">

                <img
                    data-src="{mediumImage}"
                    class="tb-swiper__slide-img tb-swiper__slide-img-height lazyload"
                    alt="{alternativeText}" />

                <noscript>
                    <img src="{fullImage}" alt="{alternativeText}" />
                </noscript>
            </a>
        </f:else>
    </f:if>
</f:alias>


