Twitter Email
subspace (/ˈsʌbspɛɪs/)
A Jekyll playground site

Build simple galleries with Jekyll.

Author: Alex Vie
Title: Build simple galleries with Jekyll
Language: en-US
Created: 05:18 on Monday, 18. September 2017
Modified: 05:18 on Monday, 18. September 2017
Excerpt:

Building simple galleries using includes and Jekyll YAML data files.
Page layout: default_dyn
Last modified:
05:18 | by Alex Vie
Reading time: approx. 0 minute(s).

Data files are a fairly powerful feature in Jekyll. They can be used to store all kind of structured data in as many different files and multiple formats. Currently supported are:

CSV, YAML and JSON

For example, I started using data files to store all information about images, both local uploads and remote (linked) images, after I realized that passing a single handle is easier than remembering the exact location of an image in the file system (and then screw up case sensitivity in the process). Such an entry might look like this:

testgallery:
    remoteimage:
        url: "https://path.to/image.png"
        title: "A cool image"
        desc: "Telling us why the image is cool"
    localimage:
        name: "logo.png"     # the presence of name indicates a local image
        path: "site/logos/"
        title: "A cool local image"
        desc: "Telling us... well, you get it"

Consider this entry is within _data/images.yaml, then the image record will be available in templates as site.data.images.testgallery.remoteimage. Its attributes are accessible as site.data.images.testgallery.remoteimage.url and so on.

Of course, it’s possible to omit the testgallery part and organize images differently. One file per gallery, or any combination is possible. It just needs to be somewhat hierarchical and following the conventions you have defined.
Image 4
Image 4
Image 5
Image 5
Frecche Tricolori at Airpower 2011, Austria
Frecche Tricolori at Airpower 2011, Austria
Frecche Tricolori at Airpower 2011, Austria
Frecche Tricolori at Airpower 2011, Austria
Frecche Tricolori at Airpower 2011, Austria
Frecche Tricolori at Airpower 2011, Austria

The Code

This assumes, the images are in _data/galleries/default.yaml organized as children of the main node testgallery.

<div class="gallery" markdown="1">
{% for image in site.data.galleries.default.testgallery %}
  {% assign this_image = image[1] %}
  {% include gfx/GITEM.html image=this_image %}
{% endfor %}
</div>

The data file

_data/galleries/default.yaml

testgallery:
    image1:
      url: "...."
    image2:
      url: "...."
    image3:
      url: "...."
    image4:
      url: "...."
      desc: "Image 4"
    image5:
      url: "...."
      desc: "Image 5"

The above is only an example of what is possible. Another method is to include image definitions in a post’s front matter. This is useful when the images are private to the post and you want to avoid excessive population of the _data folder.

Suppose you include the gallery definition above in the front matter of a post, you can then access the items via {% for img in page.testgallery %}