How to set up the an Image Lightbox

Here’s an example that shows how to add a Lightbox to show each image.

As before, to automate the layout, a list of images is stored in a frontmatter variable. The post then loops over that list to output them as thumbnail cards. This is easier than copy-pasting the same HTML for each image.

Some Bootstrap HTML is then included in the page to create the lightbox. This is done using the modal and some simple CSS and JS to make it all work together. To have a look at how this works, look at this page in the GitHub repo.

Here’s the card columns in action. Click each image to open it in a lightbox.

(The photos are from Unsplash!)