This site is built with Jekyll, a relatively simple blog-aware site generator. It comes with all the bells and whistles that you need to get a site up and running in no time. And equally important: it has some good documentation to go with it.

Quick summary: I like it.

The theme I use is pretty much stock, with some small adaptations. And as such, the way images are handled is also very… “stock”. For some future posts that I’m planning I needed to add a Lightbox. And while I was at it, I also wanted to make sure that images were Responsive, after all: we’re in a mobile world these days…

This is a short write-up of how I set things up.

Adding a Lightbox

Finding a Lightbox implementation isn’t hard. There are way too many to choose from. My problem with most of them is that they depend on libraries like JQuery, Bootstrap, etc.. I find it hard to justify adding X Kb of dependencies to a page for a feature that can be coded in less than 100 LOCs. The thought of coding one myself almost crossed my mind, but fortunately I came across this minimal lightbox.

The documentation is sparse, but fortunately so are the LOCs :-) . It comes under an MIT license, at least according to this page.

Adding the lightbox to default.html is a quick:

   <script type="text/javascript" src="{{ "/js/minimal.lightbox.js" | prepend: site.baseurl }}"></script>

(assuming that the library is installed in /js).

Great! Now on to handling the actual images!

Responsive images

With the lightbox scaffolding in place, I now needed a way to:

  • add images to a post;
  • have them scaled appropriately;
  • add the responsive behaviour to the output, and;

  • add the lightbox attributes to the output like:

             <img src=""  minimal-lightbox="">

The grunt of the work can be handled by a Jekyll plug-in, I chose jekyll-responsive_images. It scales the assets and has a dedicated responsive_image tag to add images to a post. The responsive behavior can be customized through a template.

Installation was relatively simple.

srcset attiribute

There are a few ways to handle responsive images. Srcset and sizes is a great read on the matter. Based on this and other sources, I decided to use the srcset attribute.

Putting it all together

So the final step is to add all these insights to a responsive-image.html (as required by responsive_image). The Jekyll theme that I use is build up in a way that content is wrapped in a 800px <div>. Images wider than 800px spill over and ruin your nice layout. So, in order to automatically load a scaled-down version of these images and have the original open in the Lightbox, I opted for a bit of a dirty trick: using the sizes attribute in the tag and a hard-coded 800px cap in the Liquid template. Not something to be particularly proud of, but effective. Here’s the content of responsive-image.html:

    {% capture srcset %}
       {% for i in resized %}
           /{{ i.path }} {{ i.width }}w,
       {% endfor %}
    {% endcapture %}

    {% if original.width < 800 %}
    <img src="/{{ path }}" minimal-lightbox="/{{ path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w" sizes="(min-width: {{original.width}}px) {{original.width}}px, 100%">
    {% else %}
    <img src="/{{ path }}" minimal-lightbox="/{{ path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w" sizes="(min-width: 800px) 800px, 100%">
    {% endif %}

In the end it took me longer than I wanted to get something relatively simple in place. Hopefully this writeup will help you get up to speed…

More tk