Making New Image Galleries

Feb 20, 2025

Tags: development blog galleries

Lets do this

I can’t get this out of my head so I’ve started to knock away at making a new image gallery shortcode. yes, that means I have three image galleries now, yes I completely underestimated how many insane options you need to consider in the hopes of making this infinitely functional.

I’m going to keep some notes here so I can remember what it is I’m doing. After all, I’m not writing a tutorial because I barely know what I’m doing, besides there are other tutorials out there that will get you a lot further than this. You’ll see the changes I’ve made a long the way which could be helpful for you in the future.

To Start

The first thing I needed to do was figure out what kind of lightbox I wanted. Yes this was my first step because I love a lightbox (who doesn’t?), if I didn’t want that kind of functionality here I could have figured this out a long time ago. But that ease of use is fundamental to my enjoyment on the internet and I’m sure I am not the only one.

lightbox2 is pretty popular but it feels slow and possibly bloated. photoswipe is actually already included in one of the gallery modules on this site, I could have used that if, and this is a big huge if, I had thought about it like 4 hours ago.

Enter… SimpleLightbox! It’s incredibly light and efficient, looks nice and supports a wide range of options with plenty of parameters that can be tweaked. All of that sounds good, and it did’t look too complicated. I often find things like this have been engineered to solve 85 million different scenarios so they are big and bloated. POWERFUL! for sure, but for me too much.

NEXT

I needed to figure out how to build the gallery. I always had a thought that you would just use hugo page resources to load all images into a map and then range through them, maybe using the built-in image resources to build a thumbnail at the same time. A bit of formatting and then you’d have some kind of gallery, boo-bam. But, it couldn’t possibly be that easy.

Well it turns out it’s basically that easy.

Christian Specht has an excellent tutorial that literally does just that. He uses lightbox2 which I also used at first, because I wanted to just see how the javascript and css was loaded. This is such a great skeleton for what I wanted to do. Also, this is just pure dumb luck, while looking around for ideas and tutorials I found this stackoverflow comment that laid out a pretty compelling idea for a responsive image gallery.

WE’VE GOT THE BONES!

The skeleton is coming together. With SimpleLightbox’s javascript & CSS files in place, I subbed them into my new shortcode, {{< newgallery >}} and nothing worked. I fiddled with it for a while and I realized that it was actually kind of working, at least the CSS was. I utlizing the script properly. In the examples on the website there is some sample code on what I was missing.

<script>
// using plain js
new SimpleLightbox({elements: '.imageGallery1 a'});
</script>

As you may have noticed, you need to assign a name to the gallery, really you are actually giving a unique name to the <div> that its sitting in and then telling the script. This is how you end up with your lightbox. Because the bleets section is going to be one large page (until I deal with pagination but lets ignore that for now), each of these image galleries needs to have a unique identifier. During testing it would start to freak out if you arrowed through one of the galleries on this big list of images. My thought was to use a random number and Hugo (go?) has a function built in for that, math.Rand. Originally I was just going to drop a random number here but theoretically you could end up with a collision, so to avoid that I’m taking the post’s date/time and using a function that is new to me, .UnixNano! This converts the time to the number of seconds that have passed since January 1, 1970. This should avoid collisions indefinitely!

The way that I’m targeting these random divs is by using another CSS Selector. they all start with <div class="imageGallery--[RANDOM NUMBER]"> The css:

[class^="imageGallery--"] { 
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}

Make it Pretty

Speaking of CSS, now that we have functionality, I wanted to address the visuals. I have rules setup in the shortcode, by counting the number of images {{ $image := (.Page.Resources.ByType "image") }}, i setup different arrangements.

• A single image will be original aspect ratio and have a larger thumbnail
• 2 will be side-by-side and thumbnails will square/cropped
• 4 will be 2x2, square, cropped
• 3 will be 2 side-by-side and then the third centered below them.

This makes the section look so much better. I’m extremely pleased. So…

What’s left to do?

• figuring out how to work the $image.Resize Fit/Fill/Resize etc
• how the gallery css wasn’t working for images that weren’t square
• how I want to have full sized images
• from the advice of the hugo forums, I should change the behavior of this to look for images from first, page resources, second, parent page resources, and third, a specific filepath.

This last point I’m going to get into further in another post. Currently I’m not able to use this in the sub-posts of the games section because that is a whole other can of worms that I’m about to crack wide open. Thank you for reading!