on
Lightbox2 in hugo
This is a quick run-down of how I set up lightbox2 for my hugo site. To be honest, it is my personal documentation to the shortcode written by Julian Stier in his blog-post about lightbox2. His post helped me deal with a number of problems using lightbox2 with hugo when the main lightbox2 tutorial had failed me. This will be a post under constant development as I work out lightbox2 and to remind myself how to implement it.
Setup
Preparing the directories and files
The first step is to prepare the main hugo directory. If it is not there already, generate the directory /static/css/ and /static/js/.
Download the latest github release. Unzip where you want. The important detail is extracting from the lightbox2 release the file /dist/css/lightbox.css into /static/css/.
If your hugo site does not have jquery, extract from the lightbox2 release the file dist/js/lightbox-plus-jquery.css into /static/js/.
Modifying the html
The exact details of this bit can change depending on your hugo setup. The main concept is that you have to find the files with the <head> & <body> tags. In the head section, add <link rel="stylesheet" href="/css/lightbox.css">. In the body section, add `.
Shortcode: figure
The shortcode was taken directly from Julian Stier’s blog post on his lightbox2 implementation. This was put under /layouts/shortcodes/figure.html.
Implementation
Single images
The shortcode written by Julian Stier has the option for:
- src : Where the image is
- class : where. floating.
- caption : caption
{{< figure class=“floatright” src="../../photos/DSLR-timelapse/2020-10-25_16-28.png" caption=“A random image from my gallery” >}}
Gallery
Work in progress.
Followed the guide posted by Christian Specht.
My version of his can be found here. It will display the first image as regular sized, and the rest in a minimized thumbnail. Depends on images being locally hosted in a repository. Anything outside using a CDN for example requires third-party intervention.
Setting up a CDN
CDN - Content Delivery Network. An important feature to have in a large-scale gallery. This website is currently hosted on github. Needs an alternative to accommodate the large number of files I expect to display in the future.
Some options as I have seen are Netlify’s LFS (not many good tutorials), cloudinary, Blackblaze B2+Cloudflare, or a personal VPS. I’m currently attempting cloudinary after having tried Netlify’s LFS.
Netlify’s LFS
I will admit that it sounds great, but I have encountered a number of challenges in getting it to work. there are unfortunately limited tutorials on the topic.
Cloudinary
cloudinary has a free tier with 25GB of storage and/or bandwitdth. This should be enough for the time being. It has a number of useful image-transformations which are done by modifying the URL itself. It has been very satisfactory to use so far. I expect it will give me a decent bit of breathing room. Unfortunately, the next tier up is about 100$ per year. It may be cheaper for some to host their site on a VPS.
References
- Figure shortcode and getting me to understand lightbox:
Julian Stier: Adding lightbox to Hugo
- Adding gallery option:
Christian Specht: Creating an image gallery with Hugo and Lightbox2