Jekyll / Lightbox2 Image Gallery, Another Approach

In one of my recent posts, I showed how to build an image gallery with Jekyll and Lightbox2.

The gallery featured there consists of one index page and multiple subpages, and all the content was dynamically generated out of a YAML data file.

Now I'm building another site with Jekyll, and I needed a slightly different kind of image gallery there:

• multiple long text pages with images on each one
• the pages that contain images are spread across the site, so there's no "index page with subpages" structure
• on one page, there can either be multiple images together, or single images sprinkled between text blocks

With my first gallery approach, this was not possible at all, so I had to think about something new.

The List of Images

As the pages with images would be spread across the whole site, it didn't make sense to put the images for all pages in one single YAML data file.
Instead, I saved them directly in the YAML front-matter of the respective page. So a typical page, using the same demo images like in my first approach, would begin like this:

---
layout: default
title: Gallery with text
imgfolder: /img/demopage
images:
  - name: image-1.jpg
    thumb: thumb-1.jpg
    text: The first image
  - name: image-2.jpg
    thumb: thumb-2.jpg
    text: The second image
  - name: image-3.jpg
    thumb: thumb-3.jpg
    text: The third image
---

Loading jQuery and Lightbox2

First, I needed to load jQuery and Lightbox2's CSS and JS files again.

In my first approach, I had a separate layout file anyway (with more stuff inside than just jQuery and Lightbox2).
This time, I need only jQuery and Lightbox2... in other words, just these three lines:

<script src="http://christianspecht.de/js/jquery-1.10.2.min.js"></script>
<script src="http://christianspecht.de/js/lightbox-2.6.min.js"></script>
<link href="http://christianspecht.de/css/lightbox.css" rel="stylesheet" />

It doesn't make sense at all to create a special layout file for just these three lines, so I put them into an include file instead, which I can load with:

{% include galheader.html %}

Displaying the Gallery

As already mentioned in the introduction, I needed two different "modes" how to display images:

1. Display a single image
2. Display the complete gallery

I'm using another include file for this, with the following code:

{% for image in page.images %}
    {% if include.image == null or include.image == image.name %}
        <a href="{{ page.imgfolder }}/{{ image.name }}" 
        data-lightbox="1" title="{{ image.text }}">
            <img src="{{ page.imgfolder }}/{{ image.thumb }}" title="{{ image.text }}">
        </a>&nbsp;
    {% endif %}
{% endfor %}

This just loops through all the images on the page, and uses Lightbox2 to display either a single image (if the image's name was passed via include.image) or all images.

So there are two different ways how this file can be included:

1. Show all images defined in the front-matter of the current page:

   {% include gal.html %}
   

2. Display a single image:

   {% include gal.html image="image-1.jpg" %}
   

The End Result

Here is a sample page which features both gallery "modes":

---
layout: default
title: Gallery with text
imgfolder: /img/demopage
images:
  - name: image-1.jpg
    thumb: thumb-1.jpg
    text: The first image
  - name: image-2.jpg
    thumb: thumb-2.jpg
    text: The second image
  - name: image-3.jpg
    thumb: thumb-3.jpg
    text: The third image
---

{% include galheader.html %}

Two single images:

{% include gal.html image="image-1.jpg" %}
{% include gal.html image="image-2.jpg" %}

Some text

...and the complete gallery for this page:

{% include gal.html %}

Footer text

This will be rendered to the following HTML (just the part with the galleries):

<script src="http://christianspecht.de/js/jquery-1.10.2.min.js"></script>

<script src="http://christianspecht.de/js/lightbox-2.6.min.js"></script>

<p><link href="http://christianspecht.de/css/lightbox.css" rel="stylesheet" /></p>

<p>Two single images:</p>

<p><a href="http://christianspecht.de/img/demopage/image-1.jpg" 
data-lightbox="1" 
title="The first image"><img src="http://christianspecht.de/img/demopage/thumb-1.jpg" 
title="The first image"></a></p>

<p><a href="http://christianspecht.de/img/demopage/image-2.jpg" 
data-lightbox="1" 
title="The second image"><img src="http://christianspecht.de/img/demopage/thumb-2.jpg" 
title="The second image"></a></p>

<p>Some text</p>

<p>...and the complete gallery for this page:</p>

<p><a href="http://christianspecht.de/img/demopage/image-1.jpg" 
data-lightbox="1" title="The first image">
<img src="http://christianspecht.de/img/demopage/thumb-1.jpg" 
title="The first image"></a></p>

<p><a href="http://christianspecht.de/img/demopage/image-2.jpg" 
data-lightbox="1" title="The second image">
<img src="http://christianspecht.de/img/demopage/thumb-2.jpg" 
title="The second image"></a></p>

<p><a href="http://christianspecht.de/img/demopage/image-3.jpg" 
data-lightbox="1" title="The third image">
<img src="http://christianspecht.de/img/demopage/thumb-3.jpg" 
title="The third image"></a></p>

<p>Footer text</p>

Example Code

A complete example project is here on Bitbucket, and the finished gallery pages are online as well, as a part of the example site from the first blog post.