<!-- /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>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.0/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.0/jquery.fancybox.min.css" />

<div class="gallery">
    {{ $path := print "static/photos/" (.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 "/photos" "/" $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>