image-gallery.html (1243B)
1 <style> 2 .image-gallery {overflow: auto; margin-left: -1%!important;} 3 .image-gallery li {float: left; display: block; margin: 0 0 1% 1%; width: 23%;} 4 .image-gallery li a {text-align: center; text-decoration: none!important; color: #555;} 5 .image-gallery li a span {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0;} 6 .image-gallery li a img {width: 100%; display: block;} 7 .image-gallery li::after {content: none; } 8 @media only screen and (max-width: 850px) { 9 .image-gallery li {width: 100%!important; margin: 0 0 1.5rem 0;} 10 } 11 </style> 12 13 {{ $context := .context }} 14 {{ $gallery_dir := .gallery_dir }} 15 {{ $images := $context.Resources.Match (printf "%s/*" $gallery_dir) }} 16 17 {{ if $images }} 18 <ul class="image-gallery"> 19 {{ range $images }} 20 {{ if eq .ResourceType "image" }} 21 {{ $thumb := .Fill "1200x1200 q90" }} 22 {{ $full := .Fit "2000x2000 q90" }} 23 {{ $title := index (split (path.Base .Name) ".") 0 }} 24 <li> 25 <a href="{{ $full.RelPermalink }}" data-lightbox="gallery" data-title="{{ $title }}"> 26 <img src="{{ $thumb.RelPermalink }}" alt="{{ $title }}" /> 27 <span>{{ $title }}</span> 28 </a> 29 </li> 30 {{ end }} 31 {{ end }} 32 </ul> 33 {{ else }} 34 <p>No images found in "{{ $gallery_dir }}" directory</p> 35 {{ end }} 36