Dead simple solution to add a photo gallery to a Jekyll site.
It’s easy to extend Jekyll with a small dose of creativity. Thanks to the template language Liquid, the only thing you often need is a new layout file. That’s what we use here as the foundation:
/_layouts/photo_set.html: The layout for each photo set, displaying every photo of a photo set.
photos.html: The overview page, displaying all photo sets.
berlin.md: An example photo set.
/images/photos/: The directory for all photos. You can change it in
/_layouts/photo_set.htmlif you like.
Copy the files and folders of
/jekyll/ into the root directory of your Jekyll project.
Note: If you already have a layout called
photos_set, just rename the files of jekyll-photos.
Once everything is in place, you only need to add a new page with the following YAML front matter block:
--- layout: photo_set title: Berlin permalink: /berlin/ description: "An example photo gallery." photos: set: berlin size: 3 ---
The important part is:
--- photos: set: berlin size: 3 ---
set represents the photo set name and
size the number of photos that the set contains.
Now, rename the three photos to berlin-1.jpg, berlin-2.jpg, and berlin-3.jpg, and move them to
/images/photos/. That’s it!
Note: If you want to use a different file format for your photos or images, you need to adjust
/_layouts/photo_set.html, or make it configurable. You could also use Jekyll File Exists to automatically detect what extension is available.
The goal of jekyll-photos is to show how easy it is to implement new site functions. It’s intentionally hold to the basics, which makes it easy to customize. For example, you could add photo categories or lazy load photos (like I do on my personal site).