How to set up the Masonry Layout with an Image Lightbox

Here’s an example that extends the Masonry layout 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 the 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!)