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