Jekyll meets Lychee - A Liquid Tag plugin

A missing piece on my static generated personal website tobru.ch was a nice looking, well integrated photo gallery.

Some time ago I came across Lychee, a very nice looking, simple gallery. It uses JavaScript to render the content in the browser and a JSON API (backed by PHP) to get all information from the server. This was a good reason for me to write a Liquid Tag for Jekyll, and learn Ruby. I was doing some little Ruby scripts at work, but did not have time to better learn Ruby. And as I like learning a new programming language using a usable example (not just doing lesson-stuff), this was perfect. The lychee_tag.rb for Jekyll was born.

How to use

You need a working Lychee installation, refer to the documentation.
The plugin connects to the demo gallery if you don't change the URL to your own server.

Just copy the plugin to the _plugins directory in your Jekyll root. Then add the following to your _config.yml:

lychee:
  url: http://mylychee.mydomain.com
  album_title_tag: h1
  link_big_to: lychee

• url: Points to your Lychee instance
• album_title_tag: Which HTML tag should be put around the album title?
• link_big_to: How will the link to the big image be generated?
  • lychee: A link to the big image on your Lychee instance
  • img: A direct link to the big image. Usefull for using together with a lightbox (see protip below)

Now you can use the newly available tag on your blog:

{{ "{% lychee_album <album_id> " }}%}

Replace <album_id> with the ID of the album to be displayed (Hint: look at the URL when opening an album in Lychee).
To see a working example, just have a look at my personal website: Berlin - September 2013

Protip for the So Simple Theme

Place the Liquid Tag between a figure HTML tag:

<figure class="third">
{{ "{% lychee_album 1 " }}%}
</figure>

And add the following JavaScript snippet to assets/js/_main.js (don't forget to run grunt after that)

$(document).ready(function() {
  $('.third').magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
      titleSrc: function(item) {
        return item.el.attr('title') + '<small>by my name here</small>';
      }
    }
  });
});

Enjoy.

The code

hosted on gist.github.com