{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="{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="{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="{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="{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.falMedia}">
                    <f:then>
                        <f:render section="showImage" arguments="{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}">
                            <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="{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="{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="{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="{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="CatImage">
        <f:render section="showImage" arguments="{width:width, height:height, maxWidth:maxWidth, maxHeight:maxHeight, mediaElement:firstCategoryImage, mediaQuery:mediaQuery}"/>
    </f:section>
    <f:section name="FalImageWithPopin">
        <f:if condition="{newsItem.falMedia}">
            <f:then>
                <f:render section="showImageInPopin" arguments="{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="{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="{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">
                    <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:for>
            </f:if>
            <f:image src="{mediaElement.uid}" treatIdAsReference="1" alt="" width="{width}" height="{height}" maxWidth="{maxWidth}" maxHeight="{maxHeight}"/>
        </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 src="{mediaElement.uid}" treatIdAsReference="1" alt="" width="{width}" height="{height}" maxWidth="{maxWidth}" maxHeight="{maxHeight}"/>
                </v:tag>
            </a>
        </f:if>
    </f:section>
    <f:section name="captionInfo">
        <f:if condition="{mediaElement.alternative} || {mediaElement.description}">
            <figcaption class="figure-caption__info">
                <button type="button" class="js-caption-toggle" data-fa-icon="&#xf05a;">
                    <span class="ghost">{s:l(key:'albums.montrer')}</span>
                </button>
                <div class="js-caption caption -hide">© {mediaElement.description}</div>
            </figcaption>
        </f:if>
    </f:section>
</div>