{namespace n=GeorgRinger\News\ViewHelpers}
<div xmlns="http://www.w3.org/1999/xhtml" lang="fr"
    xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
    xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
>
    <f:section name="HomeOrMainOrFalImage">
        <f:if condition="{newsItem.homeMedia}">
            <f:then>
                <f:render section="showImage" arguments="{lazyload:lazyload, imageClass:imageClass, newsItem: newsItem, width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight, mediaElement:'{newsItem.homeMedia -> v:iterator.first()}'}"/>
            </f:then>
            <f:else>
                <f:if condition="{newsItem.mainMedia}">
                    <f:then>
                        <f:render section="showImage" arguments="{lazyload:lazyload, imageClass:imageClass, newsItem: newsItem, width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight, mediaElement:'{newsItem.mainMedia -> v:iterator.first()}'}"/>
                    </f:then>
                    <f:else>
                        <f:if condition="{newsItem.falMedia}">
                            <f:then>
                                <f:render section="showImage" arguments="{lazyload:lazyload, imageClass:imageClass, newsItem: newsItem, width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight, mediaElement:'{newsItem.falMedia -> v:iterator.first()}'}"/>
                            </f:then>
                            <f:else>
                                <f:if condition="{newsItem.relatedLinks}">
                                    <v:render.template file="EXT:stratis_site/Resources/Private/Partials/Common/VideoThumbnail.html" variables="{video:'{newsItem.relatedLinks -> v:iterator.first()}', width:'{width -> v:format.replace(substring:\'c\',replacement:\'\')}', height:'{height -> v:format.replace(substring:\'c\',replacement:\'\')}', stratisVar:stratisVar, background:background, ratio:ratio}"/>
                                </f:if>
                            </f:else>
                        </f:if>
                    </f:else>
                </f:if>
            </f:else>
        </f:if>
    </f:section>
    <f:section name="HomeOrMainImage">
        <f:if condition="{newsItem.homeMedia}">
            <f:then>
                <f:render section="showImage" arguments="{lazyload:lazyload, imageClass:imageClass, newsItem: newsItem, width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight,mediaQuery:mediaQuery, mediaElement:'{newsItem.homeMedia -> v:iterator.first()}'}"/>
            </f:then>
            <f:else>
                <f:if condition="{newsItem.mainMedia}">
                    <f:then>
                        <f:render section="showImage" arguments="{lazyload:lazyload, imageClass:imageClass, newsItem: newsItem, width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight, mediaQuery:mediaQuery, mediaElement:'{newsItem.mainMedia -> v:iterator.first()}'}"/>
                    </f:then>
                    <f:else>
                        <f:if condition="{newsItem.relatedLinks}">
                            <v:render.template file="EXT:stratis_site/Resources/Private/Partials/Common/VideoThumbnail.html" variables="{video:'{newsItem.relatedLinks -> v:iterator.first()}', width:'{width -> v:format.replace(substring:\'c\',replacement:\'\')}', height:'{height -> v:format.replace(substring:\'c\',replacement:\'\')}', stratisVar:stratisVar, background:background, ratio:ratio}"/>
                        </f:if>
                    </f:else>
                </f:if>
            </f:else>
        </f:if>
    </f:section>
    <f:section name="MainOrFalImage">
        <f:if condition="{newsItem.mainMedia}">
            <f:then>
                <f:render section="showImage" arguments="{lazyload:lazyload, imageClass:imageClass, newsItem: newsItem, width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight, mediaElement:'{newsItem.mainMedia -> v:iterator.first()}'}"/>
            </f:then>
            <f:else>
                <f:if condition="{newsItem.falMedia}">
                    <f:then>
                        <f:render section="showImage" arguments="{lazyload:lazyload, imageClass:imageClass, newsItem: newsItem, width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight,mediaQuery:mediaQuery, mediaElement:'{newsItem.falMedia -> v:iterator.first()}'}"/>
                    </f:then>
                    <f:else>
                        <f:if condition="{newsItem.relatedLinks -> f:count()} != 0">
                            <v:render.template file="EXT:stratis_site/Resources/Private/Partials/Common/VideoThumbnail.html" variables="{video:'{newsItem.relatedLinks -> v:iterator.first()}', width:'{width -> v:format.replace(substring:\'c\',replacement:\'\')}', height:'{height -> v:format.replace(substring:\'c\',replacement:\'\')}', stratisVar:stratisVar, background:background, ratio:ratio}"/>
                        </f:if>
                    </f:else>
                </f:if>
            </f:else>
        </f:if>
    </f:section>
    <f:section name="MainImage">
        <f:if condition="{newsItem.mainMedia}">
            <f:then>
                <f:render section="showImage" arguments="{lazyload:lazyload, imageClass:imageClass, newsItem: newsItem, width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight, mediaElement:'{newsItem.mainMedia -> v:iterator.first()}'}"/>
            </f:then>
            <f:else>
                <f:if condition="{newsItem.relatedLinks}">
                    <v:render.template file="EXT:stratis_site/Resources/Private/Partials/Common/VideoThumbnail.html" variables="{video:'{newsItem.relatedLinks -> v:iterator.first()}', width:'{width -> v:format.replace(substring:\'c\',replacement:\'\')}', height:'{height -> v:format.replace(substring:\'c\',replacement:\'\')}', stratisVar:stratisVar, background:background, ratio:ratio}"/>
                </f:if>
            </f:else>
        </f:if>
    </f:section>
    <f:section name="FalImage">
        <f:if condition="{newsItem.falMedia}">
            <f:then>
                <f:render section="showImage" arguments="{lazyload:lazyload, imageClass:imageClass, newsItem: newsItem, width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight, mediaElement:'{newsItem.falMedia -> v:iterator.first()}'}"/>
            </f:then>
            <f:else>
                <f:if condition="{newsItem.relatedLinks}">
                    <v:render.template file="EXT:stratis_site/Resources/Private/Partials/Common/VideoThumbnail.html" variables="{video:'{newsItem.relatedLinks -> v:iterator.first()}', width:'{width -> v:format.replace(substring:\'c\',replacement:\'\')}', height:'{height -> v:format.replace(substring:\'c\',replacement:\'\')}', stratisVar:stratisVar, background:background, ratio:ratio}"/>
                </f:if>
            </f:else>
        </f:if>
    </f:section>
    <f:section name="FalImageWithPopin">
        <f:if condition="{newsItem.falMedia}">
            <f:then>
                <f:render section="showImageInPopin" arguments="{imageClass:imageClass, newsItem: newsItem, width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight, mediaQuery:mediaQuery, popinWidth:popinWidth, popinHeight:popinHeight, mediaElement:'{newsItem.falMedia -> v:iterator.first()}'}"/>
            </f:then>
        </f:if>
    </f:section>
    <f:section name="MainOrRelatedFileImage">
        <f:if condition="{newsItem.mainMedia}">
            <f:then>
                <f:render section="showImage" arguments="{lazyload:lazyload, imageClass:imageClass, newsItem: newsItem, width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight, mediaElement:'{newsItem.mainMedia -> v:iterator.first()}'}"/>
            </f:then>
            <f:else>
                <f:render section="showImage" arguments="{lazyload:lazyload, imageClass:imageClass, newsItem: newsItem, width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight, mediaElement:'{newsItem.falRelatedFiles -> v:iterator.first()}'}"/>
            </f:else>
        </f:if>
    </f:section>
    <f:section name="showImage">
        <v:variable.set name="allowedExtension" value="{gif:1, jpg:1, jpeg:1, bmp:1 ,png:1 , pdf:1, svg:1}"/>
        <v:variable.set name="fileInfos" value="{v:resource.file(treatIdAsReference: 1, identifier:mediaElement.uid)}"/>
        <v:variable.set name="fileExtension" value="{fileInfos.extension -> f:format.case(mode:'lower')}"/>
        <f:if condition="{allowedExtension.{fileExtension}}">
            <f:if condition="{mediaQuery}">
                <f:for each="{mediaQuery}" as="mediaQueryItem">
                    <f:if condition="{lazyload}">
                        <f:then>
                            <source
                                data-srcset="{f:uri.image(src:mediaElement.uid,treatIdAsReference:1,width:'{mediaQueryItem.width}c',height:'{mediaQueryItem.height}c')}"
                                srcset='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22{mediaQueryItem.width}%22%20height=%22{mediaQueryItem.height}%22%20viewBox=%220%200%20{mediaQueryItem.width}%20{mediaQueryItem.height}%22%20/%3E'
                                media="(max-width: {mediaQueryItem.maxWidth}px)">
                        </f:then>
                        <f:else>
                            <source
                                srcset="{f:uri.image(src:mediaElement.uid,treatIdAsReference:1,width:'{mediaQueryItem.width}c',height:'{mediaQueryItem.height}c')}"
                                media="(max-width: {mediaQueryItem.maxWidth}px)">
                        </f:else>
                    </f:if>
                </f:for>
            </f:if>
            <f:if condition="{lazyload}">
                <f:then>
                    {height -> v:format.pregReplace(pattern:'/[^0-9]/', replacement:'') -> v:variable.set(name: 'heightSrc')}
                    {width -> v:format.pregReplace(pattern:'/[^0-9]/', replacement:'') -> v:variable.set(name: 'widthSrc')}

                    {heightSrc -> v:or(alternative: widthSrc) -> v:or(alternative: '200') -> v:variable.set(name: 'heightSrc')}
                    {widthSrc -> v:or(alternative: heightSrc) -> v:or(alternative: '200') -> v:variable.set(name: 'widthSrc')}

                    <img
                        class="{imageClass} lazy lazyload"
                        data-src="{f:uri.image(src:mediaElement.uid,treatIdAsReference:1,width:width,height:height, minWidth: widthSrc, minHeight: heightSrc, maxWidth: widthSrc, maxHeight: heightSrc)}"
                        src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22{widthSrc}%22%20height=%22{heightSrc}%22%20viewBox=%220%200%20{widthSrc}%20{heightSrc}%22%20/%3E"
                        alt=""
                    />
                </f:then>
                <f:else>
                    <f:image
                        class="{imageClass}"
                        src="{mediaElement.uid}"
                        treatIdAsReference="1"
                        alt=""
                        width="{width}"
                        height="{height}"
                        maxWidth="{maxWidth}"
                        maxHeight="{maxHeight}" />
                </f:else>
            </f:if>
        </f:if>
    </f:section>
    <f:section name="showImageInPopin">
        <v:variable.set name="allowedExtension" value="{gif:1, jpg:1, jpeg:1, bmp:1 ,png:1 , pdf:1, svg:1}"/>
        <v:variable.set name="fileInfos" value="{v:resource.file(treatIdAsReference: 1, identifier:mediaElement.uid)}"/>
        <v:variable.set name="fileExtension" value="{fileInfos.extension -> f:format.case(mode:'lower')}"/>
        <f:if condition="{allowedExtension.{fileExtension}}">
            <f:if condition="{mediaQuery}">
                <v:variable.set name="mediaQueryLink">
                    <f:for each="{mediaQuery}" as="mediaQueryItem" iteration="iteration">
                        {f:uri.image(src:mediaElement.uid,treatIdAsReference:1,width:'{mediaQueryItem.width}c',height:'{mediaQueryItem.height}c')} {mediaQueryItem.maxWidth}w{f:if(condition: iteration.isLast, else: ', ')}
                    </f:for>
                </v:variable.set>
            </f:if>
            <v:variable.set name="mediaCaption" value="{mediaElement.description -> v:or(alternative:fileInfos.description)}{f:if(condition:fileInfos.copyright, then:'<br>© {fileInfos.copyright}')}"/>
            <a href="{f:uri.image(src:mediaElement.uid,treatIdAsReference:1,width:'{popinWidth}',height:'{popinHeight}')}"
               data-srcset="{mediaQueryLink -> v:format.trim()}"
               data-caption="{mediaCaption}"
               data-fancybox="gallery-id-{mediaElement.uid}">
                <v:tag name="picture" hideIfEmpty="true">
                    <f:image class="{imageClass}" src="{mediaElement.uid}" treatIdAsReference="1" alt="" width="{width}" height="{height}" maxWidth="{maxWidth}" maxHeight="{maxHeight}"/>
                </v:tag>
            </a>
        </f:if>
    </f:section>
</div>