Building a photo gallery site with Hugo

Showcases
1

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):

6 Likes
2

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 ?

3

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:

4

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.

https://staticbattery.com/

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.

5

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