<!-- /layouts/shortcodes/foldergallery.html -->

<style>
    div.gallery {
        display: flex;
        flex-wrap: wrap;
    }
    
    div.gallery a {
        flex-grow: 1;
        object-fit: cover;
        margin: 2px;
        display: flex;
    }
    
    div.gallery a img {
        height: 200px;
        object-fit: cover;
        flex-grow: 1;
    }
</style>

<!-- 3.7.1 integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="-->
<!-- 3.6.0 integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="-->

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.fancybox.3.5.7.min.js"></script>
<link rel="stylesheet" href="/js/jquery.fancybox.3.5.7.min.css" />

<div class="gallery">
    {{- range (.Page.Resources.ByType "image") -}}
        {{- $big := .Resize "x1600 webp q85" -}}
        {{- $mid := .Resize "x1080 webp q80" -}}
        {{- $sml := .Resize "x480 webp q70" -}}
        {{- $thumb := .Resize "x200 webp q50" -}}
        <a data-fancybox="gallery" data-type="image" 
          data-caption="{{ .Title }}" 
          data-srcset="{{ $big.RelPermalink }} {{ $big.Width }}w, {{ $mid.RelPermalink }} {{ $mid.Width }}w, {{ $sml.RelPermalink }} {{ $sml.Width }}w"
          href="{{ $big.RelPermalink }}">
            <img src="{{ $thumb.RelPermalink }}" alt="">
        </a>
    {{- end -}}
</div>