<!-- /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">
    {{ $path := print "content/gallery/" (.Get "src")  }}
    {{ $url  := print (.Get "src") }}
    {{ range (readDir $path)  }}
        {{/* don't try to display .DS_Store or directories */}}
        {{ if and (ne .Name ".DS_Store") (not .IsDir)  }}
            {{ $src := print "/it/gallery" "/" $url "/" .Name }}
            {{/*
                troubleshoot the $src variable as needed
                <!-- <p>{{ $src }}</p> -->
                */}}
            <a data-fancybox="gallery" data-caption="{{ .Name }}" href="{{ $src }}">
                <img src="{{ $src }}">  <br/>
            </a>
        {{ end }}
    {{ end }}
</div>