Hugo Easy Gallery

Sat, Aug 5, 2017 in Blog using tags hugo , indieweb

As I use my own website for many purposes, I wanted a simple way to display photo galleries. It’s easy for me to export a bunch of image files from my smartphone or DSLR to jpg files. It’s quite a lot of work to add them all as an image in a post in Hugo. On top of that, the display of all images in one post under eachother is not the best way to find photos or look through them quickly.

I started my search for galleries and I have found one that works quite nicely in Hugo. Li-Wen Yip has written a nice ‘addon’ for Hugo that allows you to add a gallery with a simple shortcode. It uses the well-known library PhotoSwipe.

I now can add this to my .md file:

{{ < load-photoswipe > }}
{{ < gallery dir="<directory with jpg files>" > }}

* note: I have changed the shortcode identifiers to be able to compile it using Hugo. Otherwise it would interpret them.

And it shows a beautiful mosaic with lightbox and everything. I have disabled the sharing button myself. You can download the package yourself from github.

Many thanks Li-Wen Yip for your work on this one!

You can see this in action on my Photos page.

photo's capture