Hugo theme for photography website

I’m trying to (finally!) put up a personal website, including a photography related section. My current plan is to make that part a separated site built with Hugo (there will also be a simple single-page landing site, and a work related sub-site).

Does anybody has any suggestions about themes for the photo part? I’m mostly looking for something clean and simple, responsive. Some kind of album or grouping capability is also a must, with a place for minimal description for such a group to present it. Extra points for lazy loading, if images can be embedded from another server, and if it supports multi-resolution images (to serve the biggest image that fits the viewing screen). A way to auto-generate tag-filtered album pages would also be nice.

I’m currently looking at Massively. I like the style, and how one can use it to separate the photos by themes or stories, like here (although I would usually be way less verbose…). I could also use it for the work sub-site, so I would need to ‘learn’ a single theme. But I think that photo management would be mostly manual with it.

Thoughts? Suggestions?

2 Likes

@patdavid and I have done a lot of Hugo lately. The real question is, how do you want to organize your photos on the file system for Hugo to consume? That will most likely answer the rest of your questions.

We maintain a really minimal bootstrap theme here: pixlsus / hugo-bootstrap-bare · GitLab

Master brach is bootstrap v4 and there is a branch for v5 as well.

1 Like

That would probably be year/photo-session, but I’m flexible if it makes photo management easier. ‘Articles’ (=photoshoot) will follow that pattern regardless of the underlying filesystem organization.

To be clear: I’m talking around 10 pictures per photoshoot, hundreds in total. It’s manageable to do it manually, I just want to avoid it if there is a simple solution that doesn’t involve running a full content management system.

Thanks! I will check that

I am also interested in this topic. I also use Hugo for my homepage but I think I do not remember the name of the theme any more. Currently I use Hugo for the website and Piwigo for the photos but it would be great if I could use one CMS for everything.
I think there are themes that are good for photos and other themes that are good for text/blog, but I have found no Hugo theme that is really good for both. I suspect Wordpress is better, but it is bloated etc.

I think 2nd question is, do you want one image per page or a gallery page only?

My order of priorities would be:

  • to have a single page for each photo session, either something blog-like like this or a more ‘regular’ gallery with a description on top, in both cases with pictures opening into a lightbox. In general I’d just write a short description of the session, but in some cases I’d like to be more verbose about the situation, the history of the place, etc., so option 1 would be preferable

  • if possible, also have a separated ‘all pictures’ gallery with all the pictures from all the posts above, filtered by tags. Ideally in this general gallery pictures would open in a single page, with EXIF/tag information and a link to the photo session they belong to.

Maybe I’m asking something impossible to do with Hugo? Or I would have to keep two independent trees in the filesytem (one for posts, one for general gallery), and merge/linking them by hand? :thinking:

Been eyeing Hugo for years but exif reading has been lacking. I find it convenient to add titles, captions and tags to the raw file xmp. The data then follows the image* and I can just publish it and have the fields populated.

Last I checked xmp wasnt supported by Hugo, only basic exif making it less suitable for gallery sites.

* well poor xmp standards implementation in open source software means this doesn't quite work...

You can find the name of the theme in your config.toml file.

I got recently into Hugo and have to say it’s really nice. I have no gallery, but if I had to make one I would take a closer look at this Hugo gallery:

Hugo has a nice image handling shortcode. I simply write:

{{< picture path="images/myimage.jpg" alt="a IMHO good image" >}}

And hugo renders it automatically to:

<picture>
<source srcset=/images/myimage_hu91_234400_1920x1006_fit_q75_h2_box.webp type=image/webp>
<source srcset=/images/myimage_hu91_234400_1920x1006_fit_q75_box.jpg type=image/jpeg>
<img src=/images/myimage_hu91f_234400_1920x1006_fit_q75_box.jpg alt='a IMHO good image' width=1920 height=1006>
</picture>

I also also love how little code Hugo puts on a page. Coming from Wordpress, the Hugo code is really short and smooth.

BTW, I don’t use a theme. I couldn’t find one close enough to my old Wordpress site and simply copied the design idea. Looks pretty much the same, but much faster.

1 Like