<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers"
      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:for each="{gallery.rows}" as="row">
    <f:for each="{row.columns}" as="column">
        <f:if condition="{column.media}">


            {v:media.image.height(src: column.media) -> f:variable(name: 'imgOriginalHeight')}
            {v:media.image.width(src: column.media) -> f:variable(name: 'imgOriginalWidth')}

            <a class="gallery-item"
               href="{f:uri.image(image: column.media, width: '1920')}"
               data-pswp-width="{imgOriginalWidth}"
               data-pswp-height="{imgOriginalHeight}"
               target="_blank"
               style="width:{column.dimensions.width}px; flex-grow:{column.dimensions.width}">
                <div style="display:block; padding-bottom:{imgHeight/imgWidth*100}%"></div>

                <sms:image class="img-fluid" image="{column.media}" width="1920" srcset="{column.dimensions.width * 2}w, {column.dimensions.width * 3}w" sizes="{column.dimensions.width}px, {column.dimensions.width * 2}px, 100vw" />

            </a>
        </f:if>
    </f:for>
</f:for>


<f:asset.css identifier="pswp-style" href="EXT:stwm_sitepackage/Resources/Public/Css/photoswipe.css"/>
<f:asset.script identifier="pswp-js" src="EXT:stwm_sitepackage/Resources/Public/JavaScript/photoswipe.min.js"/>
<f:asset.script identifier="pswp-init" type="module">

const lightbox = new PhotoSwipeLightbox({
    gallery: '#c<f:format.raw>{data.uid}</f:format.raw> .ce-flexiblegallery',
    children: 'a',
    pswpModule: PhotoSwipe
});
lightbox.init();

</f:asset.script>
