{{/* https://hugocodex.org/add-ons/image-gallery/ */}}
{{/*
Add this to your config yaml to serve images from `static/albums``

module:
  mounts:
    source: static/albums
    target: assets/albums


*/}}
<style>
    .image-gallery {overflow: auto; margin-left: -1%!important;}
    .image-gallery li {float: left; display: block; margin: 0 0 1% 1%; width: 19%;}
    .image-gallery li a {text-align: center; text-decoration: none!important; color: #777;}
    .image-gallery li a span {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0;}
    .image-gallery li a img {width: 100%; display: block;}
</style>

{{ $dir := string .Params.gallery_dir }}
<ul class="image-gallery">
{{ range (readDir (print "/static" $dir)) }}
  {{- $imageurl := printf "%s/%s" $dir .Name -}}
  {{- $image := resources.Get $imageurl -}}
  {{- $imagetitle := index (split .Name ".") 0 -}}
    {{- if eq $image nil -}}
    {{ return }}
    {{- else -}}
    <li>
      <a href="{{ ($image.Fit "1600x1600 q50").Permalink }}" title="{{ $imagetitle }}" class="lightbox-image">
        <img src="{{ ($image.Fill "300x300 q50").Permalink }}" alt="{{ $imagetitle }}" title="{{ $imagetitle }}">
        <span>{{ $imagetitle }}</span>
      </a>
    </li>
    {{- end -}}
{{ end }}
</ul>