A Quick Experiment to Present Pictures with Ruby and Jekyll

Jekyll is an awesome tool with clear documentation that will let you generate static websites. It’s perfect if you love Ruby and you need to create something simple and quick.

I had this idea for a while, where I wanted to create a photo album starting from the pictures I have.

The requirements were:

  • HTML with the most possible clean approach – no frameworks on top
  • Easy to navigate also from mobile
  • Can support a huge set of pictures
  • The pictures can be organized in folders and each folder would represent a different gallery
  • The pictures have an optimized thumbnail that don’t drain all the bandwidth
  • The architecture would let you add more pictures easily on further iterations
  • (DESIRABLE) The pictures can be auto oriented using EXIF metadata

Apparently, on StackOverflow, I was not the only one looking for something like this.

I started the quest stupidly optimistic, thinking that would take me no more than an hour to find something fully working on Github. So the challenge was just investing a short amount of time to play with Jekyll and setting the proper configuration options to run it my local LAN.

Well, long story short, I was wrong! I was so deeply wrong that I thought for a moment to give up and spend my free time doing something else.

You can, you should, and if you’re brave enough to start, you will.

Stephen King

Plugins

Jekyll offers the option to include custom plugins, the concepts to grasp are just a few and there are tons of plugins available on Github.

After more thorough researches I condensed the requirements I needed into these plugins:

Themes

Whereas for the theme, Jekyll has an impressive theming system, and there are loads of resources on the web. Among the jungle of websites offering themes I selected these two:

In the end, I went for the leanest and minimalist I could find: Urban theme http://jekyllthemes.org/themes/urban/

Implementation

After I gathered all the pieces that I needed, it came the tricky part; pull everything together into something working.

Many of the plugins were using RMagic to generate the thumbnails and optimize the images, but Minimagic proved to work better for my needs, it has a smaller memory footprint and was very easy to integrate.

Another pain point was the symlinks, I did not want Jekyll to copy all my images every time as some of my collections are huge, so I “took” inspiration (shamelessly copied) the same approach adopted by the Jekyll Gallery Generator, and improved the checks for not copying the same image twice.

As for last effort, I manage to make auto-rotation fully working, optimizing the algorithm from the Jekyll Gallery Generator and make it configurable in the _config.yml file.

Final Result: Azores Image Gallery

I created a new repository on Github and committed all my work: Azores Image Galley

If you want to see Azores Image Gallery in action check the demo.

To offer the site in your local network run 

jekyll serve --host 0.0.0.0

and all the devices connected to the same network can navigate the albums by typing <local_ip>:4000.