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

You've successfully subscribed to Tobias Brunner aka tobru
Great! Next, complete checkout to get full access to all premium content.
Error! Could not sign up. invalid link.
Welcome back! You've successfully signed in.
Error! Could not sign in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.