How I Make Photo Galleries with Jekyll Data Files

I have been using Jekyll since 2015 and being a photographer, I’ve always had photo galleries as a major part of my site. However, I also had to meticullously put them together by hand and write tons of repetitive code. Luckily, I found a better way.

Liquid 'for' tags

Jekyll uses Liquid for templating and that gives you a lot of useful functionality that you wouldn't otherwise have without using a framework or proper CMS. One of the benefits of Liquid is the {{for}} tag.

---
layout: default
gallery: true
title: Chestnut
header-title: Chestnut
photos: true
img: chestnut/img_5460.jpg
---
<div class="Collage">
{% for image in site.data.chestnut %}
<div class="image_wrapper">
  <a class="swipebox" href="/img/chestnut/{{ image.image }}" rel="gallery">
    <img class="item" src="/img/chestnut/{{ image.image }}">
  </a>
</div>
{% endfor %}
</div>

Let's break down what's going on here: I have a wrapper with a class of Collage which gives me the grid for my galleries. Then we have the {% for image in site.data.chestnut %}. this is the file path you to your actual data file. For each data file I use a .csv extention (you could also use json or yaml) and this is how those look:

image
IMG_1215.jpg
portfolio180.jpg
IMG_5460.jpg
IMG_2821.jpg
IMG_5756.jpg
IMG_1734.jpg
IMG_3571.jpg
IMG_1406.jpg
IMG_1574.jpg
IMG_1893.jpg
IMG_5462.jpg
IMG_8991.jpg
IMG_3699.jpg
IMG_4558.jpg
IMG_1385.jpg
IMG_5490.jpg
IMG_5492-2.jpg
IMG_5499.jpg
IMG_6377.jpg
09112017_8499.jpg
09142017_8534.jpg
09162017_8547.jpg
09252017_8827.jpg
06032017_IMG_2608.jpg
09112017_8505.jpg

These data files are just a list of the files I want to include. You can then re-order the list and the page will update and put the images in the new order. I select all of the pictures in the folder I want and copy and paste them into one of these .csv files. A little setup work, but pretty straight forward overall. I hope you found this useful! To learn more about the different technical parts of the site, read this. If you want to learn more about Liquid or 'for' tags, check this out.

Thank you for reading! If you enjoyed this post, please feel free to share it.

More Posts