I am working on writing a “decade in review” blog post for here and decided it would be cool to include some image galleries. Inspired by Steve Layton’s post, I thought GLightbox sounded like just the thing I was looking for.

But whereas Steve’s clever trick was to use Javascript to add the right structure to all the images on his site, I decide to go a different route and write a custom Hugo shortcode to support using GLightbox. Custom shortcode? Shortcode? If you’re not familiar with this part of Hugo, the static site generator that powers Micro.blog under the hood, well you’re not alone. A shortcode is a Hugo-specific extension to your Markdown posts so that using a specific syntax you can dynamically create complex HTML content. For example, you can use a Hugo shortcode for YouTube videos so that you only have to supply a small ID slug and the proper embed HTML is generated.

Since getting GLightbox to look right with images requires a fair amount of HTML markup, I wrote the following in my custom Micro.blog design under layouts/shortcodes/glightbox.html:

Check out my post on Vertigo comics worth reading to see GLightbox in action using this short code on my Micro.blog site!

Now that I’ve shaved that yak, I can get back to writing my decade review and finding the pictures I want to use for it.