bglug.it/layouts/shortcodes/foldergallery.html
omartek 6ef0012adf Proposta galleria foto con shortcode e fancybox.js (#129)
Ecco la soluzione [trovata qui]([url](https://www.ojisanseiuchi.com/2020/01/11/a-folder-based-image-gallery-for-hugo/)).

Reviewed-on: #129
Co-authored-by: omartek <olazzari@gmail.com>
Co-committed-by: omartek <olazzari@gmail.com>
2024-07-19 15:19:17 +00:00

43 lines
1.4 KiB
HTML

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