I tried using Jekyll Lens for a photo gallery on colinholzman.xyz. It worked and was easy to use but was not exactly what I wanted. While looking for a better method I came across this post by Sergio Basurco. In it he describes how he modified the Jekyll Photo Gallery plugin to use pig.js for loading images. Pig.js is a simple and lightweight JavaScript library to enable progressive loading of images as the user scrolls to them. The example is exactly the effect that I was looking for.

Generating Assets

Pig.js expects to be able to load various sizes for each image. To do this the we must store the images in a manner that allows the pig.js function urlForSize to return the path to the image of a given size. I have chosen to store my images like so:

├── assets
│   ├── img
│   │   ├── 20
│   │   |   ├── blue.jpg
│   │   |   ...
│   │   ├── 100
│   │   |   ├── red.jpg
│   │   |   ...
│   │   ├── 250
│   │   |   ├── green.jpg
│   │   |   ...
│   │   ├── 500
│   │   │   ├── blue.jpg
...

Since my goal is to display potentially hundreds of images like this I need a tool to resize them all and generate the directory structure above.

gallerybuilder

gallerybuilder is a simple python script I wrote to take a directory full of photos, resize them all to the sizes required by pig.js, and generate the html for my gallery page. It’s a rough draft for now but it does the trick.

One last thing I did to enhance the gallery experience is make each image a link to a full size version. To get the link to the full size image I call urlForSize with size equal to 1024. Therefore when creating thumbnail images for the assets folder we have to create sizes 20, 100, 250, 500, (for original pig.js) and 1024 (for full size link). You can see the simple change to pig.js here.

Result

You can see what this looks like on my site here. TODO: add a lot more photos.