Hugo Theme (Part 5) : Image Gallery

Hugo Theme Development
hugojacktailwindtheme

Intro

In this post we will add image gallery support and medium style zoom. We will use GLightbox for image gallery and medium-zoom for medium style zoom.

We will create a Hugo shortcode for gallery.

Create layouts/shortcodes/gallery.html. Get the gallery name if passed in shortcode. If not, use an auto incrementing integer for each gallery (Ordinal)

{{ $gallery := "" }}
{{ with .Get "name" }}
    {{ $gallery = .}}
{{ else }}
    {{ $gallery = .Ordinal }}
{{end}}

Now we can create a parent flex div and loop through the inner images and wrap them in a hyperlink with class=glightbox and data-gallery={{$gallery}}

{{ $innerStr := trim .Inner "\n\r" }}
{{ $innerArr := split $innerStr "\n" }}
<div class="flex flex-wrap gap-4 justify-center items-center">
{{ range $innerArr }}
    {{ with . }}
        {{ $match := findRESubmatch `.*\((.*?)\)$` . }}
        {{ $x := index $match 0 }}
        {{ $src := index $x 1 }}
        <a href={{$src}} class="glightbox sm:max-w-72" data-gallery={{$gallery}}>
        {{ . | $page.RenderString }}
        </a>
    {{ end }}
{{ end }}
</div>

Let’s use the gallery shortcode and see what the output looks like

{{< gallery >}}
![pexels-chevanon-photography-1108099](pexels-chevanon-photography-1108099.jpg)
![pexels-nothing-ahead-17988000](pexels-nothing-ahead-17988000.jpg)
![pexels-peter-glezl-12301615](pexels-peter-glezl-12301615.jpg)
{{< /gallery >}}

Medium Zoom

We can enable medium zoom using medium-zoom. Copy the zoom script in the assets/js folder. Then will create a partial template to add it to our main layout.

In layouts/partials/zoom.html, we will check if medium zoom is enabled in site’s Hugo config file. If medium zoom is enabled, we will add the medium zoom script and styles to the layout. We will also initialize and enable zoom on images that have data-zoomable attribute and have zoomable class on the parent.

{{ if .Site.Params.mediumZoom }}

    {{ with resources.Get "js/medium-zoom.min.js" | fingerprint }}
        <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
    {{ end }}

    <style>
    .medium-zoom-overlay,
    .medium-zoom-image--opened {
        z-index: 999;
    }
    </style>

    <script>
        initZoom = function() {
            mediumZoom('.zoomable [data-zoomable]');
        }
        if (document.readyState === "loading") {
            document.addEventListener("DOMContentLoaded", initZoom);
        } else {
            initZoom();
        }
    </script>

{{ end }}

We can override the default image renderer

Create layouts/_default/_markup/render-image.html and add data-zoomable and data-zoom-src attributes

<img src="{{ .Destination | safeURL }}" class="p-0 m-0" {{ if .Page.Site.Params.mediumZoom }} data-zoomable data-zoom-src="{{ .Destination | safeURL }}"{{ end }} alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />

Now we can use medium zoom on images directly by adding zoomable class

![pexels-chevanon-photography-1108099](pexels-chevanon-photography-1108099.jpg)
{.zoomable}

pexels-chevanon-photography-1108099

We can also create a shortcode. Let’s call it photo.

layouts/shortcodes/photo.html

<div class="photo zoomable">
    {{ trim .Inner "\r\n" | .Page.RenderString }}
</div>

We can now use photo shortcode to create a zoomable image

{{< photo >}}
![pexels-nothing-ahead-17988000](pexels-nothing-ahead-17988000.jpg)
{{< /photo >}}
pexels-nothing-ahead-17988000

Thank you for reading. I will post more content shortly. You can also check out other posts in this series below.

Posts in this series