I had a trip to London and Iceland several weeks ago, and I wanted to share some of those photos with people. In the past I’ve put those sorts of photo galleries on Facebook, but some friends don’t have accounts there and I figured I could/should just keep my photos with my other personal stuff here.
Unlike WordPress, Jekyll doesn’t really have a concept of photo galleries, and since Jekyll is a static site generator it makes things a little more difficult. I looked through several other posts discussing Jekyll photo galleries, but they all seemed a bit more primitive than what I wanted. I wanted to:
- stick with existing Jekyll paradigms (e.g. markdown file to static page),
- retain metadata about my photos (e.g. location data, camera EXIF data),
- support multiple views about my galleries (e.g. photo list, map, slideshow),
- ensure photos can have landing pages and be easily navigated, and
- avoid committing images to my git repository.
After giving it some thought, I realized this was going to be a multi-step process.
- Script the process of exporting my existing photos to Jekyll-friendly structures.
- Find a Jekyll/Liquid plugin to enumerate directories/files and use the results.
- Create templates and pages for my gallery and its photos.
- Publish the site!
Step 1: Export existing photo galleries (iPhoto)
I take pretty much all my photos with my phone and those photos then get synced up with iPhoto. At the end of my trip, I browse through the photos and create an album of interesting ones. Normally I don’t go through and give every photo a title and description, but if I’m planning on sharing them I add brief notes within iPhoto.
I knew my iPhoto metadata was stored in
AlbumData.xml, but I’ve always had poor performance with massive XML data
files. I decided to start with a different approach: AppleScript. The following snippet gets me the file paths of
all the photos (in order) from whatever album I ask for:
So, to get the photos in my album named “London-Iceland Trip” I can do:
With some tweaks I can get more than just the path to a photo:
The next piece is to write something which will clean up the output, resize the photos, and write out all the different Jekyll files. For that I created a PHP script since it was going to be easiest for me. Once complete, I then just pipe the export results to the script and specify the image sizes I want:
Once complete, all the resized images are in
asset/gallery/2014-london-iceland-trip and my markdown files with the
photo details are in
gallery/2014-london-iceland-trip and they’re easily readable.
Step 2: Jekyll plugin
At a minimum, I wanted to have a listing of all the photos in a gallery index page. After some searches, I found two scripts which became the inspiration for my final plugin. My final plugin looks like:
Tag: loopdir Attributes: match: a pattern to match files within the path (e.g. "*.md") parse: whether to load the file and parse for YAML front matter path: a directory, relative to the site root, to find files sort: a property to search by (e.g. "path") Result: An "item" object is exposed to the template with a "page"-like structure. If parsing is enabled, the YAML properties are available as "item.title".
Which means I can easily compose a simple photo list with:
I reuse this plugin elsewhere for regular directory listings.
Step 3: Create templates
I’ve started out with two reusable templates in my
- Gallery List - a simple listing of thumbnails from all the photos in the gallery
- Interactive Map - an interactive map showing where all the photos were taken
I can pass arguments (like the gallery name) to the include which makes it easy to embed a gallery in any page:
Step 4: Publish
After generating everything locally, I just have to do a couple steps:
- Commit all the new
gallery/2014-london-iceland-tripfiles (and new templates)
_build/aws/publish-asset.sh $AWS_S3CMD_CONFIG gallery/2014-london-iceland-tripto upload all the exported JPGs
_build/aws/build.sh _build/aws/publish.sh $AWS_S3CMD_CONFIGto upload any modifications from the rest of the site
To make things easier for myself and, possibly, others I put the conversion scripts in my jekyll-gallery repo.
Now I’m able to refer people to the gallery or embed the gallery somewhere useful…