Building a photo gallery site with Hugo

For some years I have been doing photography assignments, both private and commercial, and especially on Jazz, World Music and Classical concerts. Currently the “International Accordion Festival” takes place, which is a full month of concerts and workshops with accordion-related artists and groups, and it is my honor to accompany the festival photographically.

Of course the photos are posted on social media, but I was looking for a place to also publish the photos on a platform that is more suitable for browsing. Flickr and SmugMug came to mind, also fiddling around with Google Photos links, self-hosting Piwigo and Lychee, but none of these made me really happy.

My requirements were:

  • One page and (nice) URL per “Album”
  • Albums display thumbnails all of their photos
  • Albums have a title and a description (which is also in their OpenGraph metadata)
  • Albums are sorted newest first (date in the frontmatter)
  • Albums can have sub-albums
  • Photos in albums are sorted oldest first (date from EXIF)
  • Clicking on thumbnails opens a lightbox (PhotoSwipe)
  • Lightbox displays photo captions from EXIF/IPTC
  • No individual page per photo
  • No different layouts, types, sections, etc., everything is an album (although there need to be “legal” pages)
  • No dynamic or interactive features like comments, ratings, etc.
  • No pagination, no “endless scrolling” (albums are not that large)
  • Native browser lazy-loading, no “fancy” extra libraries
  • Very simple appearance, mobile-friendly, responsive

I came up with a static Hugo site with a custom Gallery theme built with Bootstrap 5. The site currently has well over 5.000 photos in over 200 albums, updating and publishing only takes a few seconds, and the site is served via an nginx Docker container.

(It is in German, but apart from the captions there are literally 7 translated strings, which should be quite self-explanatory)

Its source is on GitHub, and I am continuously improving it (to keep it simple, this is not a theme; it is not made to be part of a larger site but a small little simple gallery on its own):


Hi @nicokaiser , thanks for posting about the gallery site with Hugo. It looks great.

After seeing the repo, I was not able to figure out where and how you store the images.

Can you add some info regarding this ?

I’ll update the docs as soon as I can, currently I am busy shooting photos :wink: Although I added some info to this issue already:

BEP created an awesome image gallery using Dan Schlosser Pig JS library. You can check it out here. It is pretty badass.

See it in action.

It does not include the Opengraph tags but I am sure you can add it.

Your site that you built looks great and performs well. Maybe you can incorporate some of the functionality this solution brings to the table.

Thanks @devsr-gt! I am aware of bep/gallerydeluxe, however I wanted to have more control how metadata (album names, photo captions, etc.) is displayed. I might have a look at Pig (since it uses CSS transitions), but currently I am quite happy with GitHub - nk-o/flickr-justified-gallery: Flickr's justified images gallery