Posted in Hugo

Gallery in Hugo with PhotoSwipe and shortcodes

In this article I will show how to implement a gallery based on PhotoSwipe ( a really cool vanilla javascript image gallery with responsive behaviour, touch gestures, animations, zoom, sharing links and browser history. The browser history support makes it possible to link to a specific image, usefull when sharing. It’s possible to implement responsive image loading with PhotoSwipe, but I haven’t done this yet.

It’s possible to initialize the gallery from DOM, so I don’t need to handle any JSON objects. I have build the DOM based on markup for image gallery with the two shortcodes: “gallery” and “galleryimage”. A third shortcode “galleryinit” adds the relevant javascript/css and initializes the galleries on the page (multiple galleries on the same page is supported).

I use Cloudinary to serve the images and these three settings from the page frontmatter is used by the shortcodes:

galleryprefix = ""
galleryfolder = "gallery-1"
gallerythumbnail = "t_thumbnail"

The shortcodes for the example gallery on this page looks like this:

{{< gallery title="Example gallery" >}}
{{% galleryimage file="DSC_1283" size="1280x885" caption="This is me in Rome" copyrightHolder="Rasmus Helmer Hansen" %}}
{{% galleryimage file="DSC_1350" size="993x1280" caption="This is Andrea in Rome" copyrightHolder="Tom Helmer Hansen" %}}
{{% galleryimage file="DSC_1648" size="1280x857" caption="Rain reservoir in the hall." copyrightHolder="Tom Helmer Hansen" %}}
{{< /gallery >}}

{{% galleryinit %}}

The image sizes are needed by PhotoSwipe.

How to set it up