How to extend a theme with image gallery functionality

support
,
1

Hi Hugo community (first post…)

I spent most of the weekend - finally - making a site in Hugo, it’s - as always - WIP, but for now I am happy and have declared it version 1.0 :slight_smile: and I have learned a lot about the internals of Hugo.

  • The site is using the blowfish theme https://blowfish.page/
  • It’s stored in my github repo
  • And - each commit triggers a deployment to Netlify

that’s just awesome…

BUT - The next ‘feature’ I’d like to implement is a ‘simple’ image gallery.

I see full themes, but I’d like to stick with the one I chose as that’s working as I want.

THE QUESTION
How can I extend this setup so that I can keep using the blowfish theme but also make specific pages (eg via a specific layout) present images in a more ‘gallery like’ way.

Well what’s ‘gallery like’ you naturally ask - what’s missing from the blowfish themes handling of the ‘gallery’ shortcode?

Well features like these:

  • Being able to use the arrow keys to navigate between the images
  • Select a folder of images (eg via regex) in stead of explicitly add each one
  • Go full screen in a ‘cinematiastic’ full focus mode
  • Perhaps show the exif data
  • …

The shortcode in the blowfish theme is indeed working, so far so good…

I have found this to - perhaps - be the closest, but my first attempt to implement it failed, thus I must retry with fresh eyes :wink:

Surely I cannot be the first to want to implement something like this, so pointers to tutorials, solutions etc would be appreciated.

I must have overseen something as it seems Hugo in general have a great set of documentation.

2

These I have working

(new user => limit 2 links in s post, hence one more post…!

3

I’m no expert, but from the limited time I have spent looking at hugo themes, Blowfish seems to have the best implementation of a gallery shortcode to use in blog posts. I haven’t seen any themes come close.

I would just use the gallery shortcode in your use case.

4

@edgarej Thanx for the input - I can deduce that I have chosen a good them then :slight_smile:

1 Like
5

If you want to display many images in a gallery, that looks like a lot of typing to do.

{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
{{< /gallery >}}

I’d rather build on that shortcode and write one that loads all images from a subdirectory in the current page bundle. Also, this repetitive class="something" looks weird to me. Why would I define the grid on the image instead of its container? Something like

{{< gallery cols=3 dir=gallery>}}

where the shortcode picks up all images in, say, gallery, seems easier to use. And then I’d employ a div with display:grid as image container, preferably adjusting itself to the display size. Not a div where every image is positioned absolutely, as the theme does it. And while we’re at it, I’d think about a way to add alt attributes to the images. Accessibility!

Granted, not every old browser will be able to work with that. OTOH, since blowfish uses flex, I don’t see why one shouldn’t use grid, too.

1 Like
6

I found this right around the time I read your post: GitHub - mfg92/hugo-shortcode-gallery: A theme component with a gallery shortcode for the static site generator hugo.

It actually works very well, and is way easier than blowfish’s gallery. you put all your images in a folder and have the shortcode point to it and it automatically creates the gallery. downside, I don’t know how well it will play with your theme/tailwind theme. I tried the shortcode on a template that uses tailwind, and some margins created by the theme’s template did not work well with this shortcode. i don’t know how well it would play with blowfish since blowfish uses tailwind.

7

I’m using photoswipe5-gallery which has arrow navigation, slideshow, plus other useful features - you can see a demo for photoswipe here.

not sure how this will work with blowfish theme, as I never used this.