hugo gallery shortcode

README.md

A basic image gallery shortcode for Hugo, using https://www.lightgalleryjs.com/.

Image metadata, such as alt text, can be added to the frontmatter using the resources key and filename: https://gohugo.io/content-management/page-resources/#resources-metadata-example

The gallery features and transition can be set through the lightgallery plugins and options, please see:

• https://www.lightgalleryjs.com/docs/settings/
• https://www.lightgalleryjs.com/demos/transitions/

layouts-partials-css.html

<!-- light gallery -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.4.0/css/lightgallery-bundle.min.css" integrity="sha384-dBF8MEM2phKRyLDWAAiv46eog697GrUsdB8kIwEzCgyaIQkCNu08OjhnC8cSZOqh" crossorigin="anonymous" />

<style>

.gallery-frame {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  padding: 1rem;
}

.gallery-item {
  margin: 1rem;
}

</style>

layouts-partials-js.html

<!-- light gallery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.4.0/lightgallery.min.js" integrity="sha384-SMXsJkdv0pWRFF7S1lZPUvnBOw2WnTKw88DRxOqLysifuSomt1/jdArjX6c+d8yu" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.4.0/plugins/pager/lg-pager.min.js" integrity="sha384-KWUYFmH9+fIKCHDl+8GwbHvmGw3Q4qk0mVB1BBRznlQIZma3czxxpeVQtD71bM64" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.4.0/plugins/zoom/lg-zoom.min.js" integrity="sha384-B2e5p5SHlYQtPrvEdMpFrKtwNN5cJgFgKWpZBLdEmgjDjaPKl7bVh0masHqDdHoc" crossorigin="anonymous"></script>

layouts-shortcodes-gallery.html

{{ $filter := default "images/*" (.Get 0) }}
{{ $gallery := (.Page.Resources.Match $filter) }}
{{ $size := default "200x120 q50" (.Get 2) }}

<div id="gallery-{{ $.Get 1 }}" class="gallery-frame">
{{ range $gallery }}
    {{ $resized := .Fit $size }}
    <div class="gallery-item" data-src="{{ .Permalink }}">
        <a class="thumbnail" href="{{ .Permalink }}" data-lightbox="{{ $.Get 1 }}">
            <img src="{{ $resized.Permalink }}" alt="{{ default "no alt text provided" .Title }}" />
        </a>
    </div>
{{ end }}
</div>

<script type="text/javascript">
    lightGallery(document.getElementById('gallery-{{ $.Get 1 }}'), {
        mode: 'lg-fade',
        plugins: [lgPager, lgZoom],
        selector: '.gallery-item',
        speed: 250,
    });
</script>

post-example-index.md

title	resources
Example Gallery	src title img/test.png an image full of testing

Some words.

{{< gallery "img/*.png" "test" "300x200 q75" >}}

An image gallery, and some more words.