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 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.
You can see what this looks like on my site here. TODO: add a lot more photos.