Joel's Travels in Bosnia & Herzegovina, Europe

Hereโ€™s an example for multiple images that uses Bootstrapโ€™s card columns for a Masonry-like layout. Itโ€™s not perfect, but with some careful ordering of the images, you can get some good results. This example also shows some Liquid tags used in conjunction with frontmatter variables to automatically create your layout.

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.

Hereโ€™s the card columns in action.