Jun 29, 2024 | 2 mins | #hugo,#photo gallery,#photography

Photo gallery & Hugo

The next step in building my new site is coming up with a nice and useful photo gallery. Instagram is owned by Meta, and what you publish there is almost no longer yours. DeviantArt is not even a shadow of what it was twenty years ago. So I find myself with nowhere to post my photographs (except maybe for the ones I post on Mastodon once in a while), and this renewed site might as well be the best place to host them. The problem is coming up with a functional and appealing gallery in Hugo. This is the first post chronicling my effort to build one.

What do I need?

There are some things I would like to be able to do:

  1. each photo should have one of more associated tags
  2. have a single, nice looking gallery, with photographs probably displayed in a grid
  3. tapping on each photo should show some optional description and meta data if available
  4. it should be possible to share a single photo

Nice to have

  1. gallery filtering by tag
  2. when writing a general post, it would be nice to be able to select a number of photos and have them shown in the post in a “local” gallery
  3. importing an existing folder of photos should be easy-ish

Possible solutions

Matze has an implementation that covers 2., somewhat 3., and 1. of the nice to haves, here’s an example. But, it’s quite js heavy, doesn’t cover 1. and 4. as far as I can tell, and overall there is something I don’t completely like about it, though I can’t exactly point my finger to the what.

Thomas Jensen implemented points 2., somewhat 3., and 2. of the NtHs, here’s an example. Still kinda js heavy, though.

Bill Glover’s solution to the problem is interesting: solves points 1., 2. (although not so nice looking as Matze’s), 3. (because each photo has its own Hugo post), and 4., and it also provides a nice way to automatically extract exif data from the shot, if available. Doesn’t provide the NtHs, but might be a good starting point.

Next steps

I will start playing around with the three solutions I found, and try to extract the best parts of each so as to cover all my main needs, as well as the NtHs.

Will keep you posted on the results, and if you have any idea/lead, please contact me!

Share

See also: