I don’t do webdev often, but lately there’s been a small spurt of most of the my projects being websites. Photo galleries and albums are an extremely common thing on websites, and I would assume quite a few have wrestled with yamls describing the file path, name, and caption if they’re trying to do it in Jekyll. Today, I’m going to show you how to configure jekyll to use all files in a folder that’s passed in as an argument. Once it’s set up, all you need to do to create a new album is create a folder, throw your pictures in, and then:

{% include album.html albumname="myAlbumName" %}

You can see the resulting album here: example Ok, so here’s my directory structure, you can modify my code to fit yours:

.
├── _config.yml
├── _includes
|   ├── album.html
├── _posts
|   ├── 2019-7-28-The-Case-For-Traveling-Alone.md
├── images
|   ├── galleryv2
|   |    ├── soloTravel
|   |    |    ├── randomimage.jpg
|   |    |    ├── anotherrandomimage.jpg
|   _plugins
|   ├── exiftag.rb
|   ├── jekyll_minimagick.rb

We’re going to want thumbnails, so I used jekyll-minimagick-new (that’s jekyll_minimagick.rb in plugins) with the following in my _config.yml:

mini_magick:
    photoFolders:
        source: images/galleryv2
        destination: thumbnails/images/galleryv2
        resize: "320x240^"
        gravity: "center"
        extent: "320x240"

Now, under _includes, create album.html:

<div id="{{include.albumname}}">

    {%- for image in site.static_files -%}
        {%- if image.path contains 'images/galleryv2' and image.path contains include.albumname -%}
            <a href="{{ image.path }}" data-sub-html="{% exiftag image_description, , {{ image.path }} %}" >
                <img src="/thumbnails{{ image.path }}" />
            </a>
        {%- endif -%}
    {%- endfor -%}

</div>
<script>
    $('#{{include.albumname}}').lightGallery({
    thumbnail:true
});
</script>

Basically, this loops through every static file, and then looks for those that match image/gallery/albumname and builds the album based on that. Not the most efficient thing in the world, but it’s all done compile time and it’s fast enough, so who cares? Besides, from what I’ve seen, this is the standard way in liquid to get files in subfolders

But what about captions? That’s what the exiftag line is for, and oh by the way, we need to install exifr and mini_magick. So your gemfile should look like this:

source "https://rubygems.org"
gem "jekyll"
gem "mini_magick"
gem "exifr"

Place this in your _plugins directory. This reads from the exif of the jpg for the caption, so we don’t need a separate data yaml mapping captions to filenames. To actually put the captions on the images, you need to find a way to insert EXIF data. If you’re on windows, just right click the image, go to the details tab, and type the caption into the Title field and hit ok.

So now we can just put

{% include album.html albumname="soloTravel" %}

And the album will build automatically with thumbnails, captions, and all the features of lightgallery available.

Also, one more tip I discovered while writing this post: surround your liquid code with raw and endraw tags if you’re trying to get them to display as code examples instead of running.

I hate HTML/CSS (I swear, I really should’ve just gotten a template instead of writing this site from scratch) so let me leave you with this parting nugget of wisdom: