Jekyll - Get all folders in a directory and generate pages

Question

I have a folder structure like so:

/gallery/images/category1/
/gallery/images/category2/
/gallery/images/category3/
/gallery/images/category4/
/gallery/images/category5/

and so on..

Inside each of these folders, there are a bunch of images. However, these category folders are always changing, the names as well.

My goal is to have jekyll auto generate a seperate page for each on of these categories. Then in this page, cycle through each image in that folder and display it on the page.

What I need help on:

• How do I look in the /gallery/images folder and grab all the folders
• Once I know all the folders, how do you generate a page such as /gallery/[FOLDER_NAME].html for each one of them

Once I am able to do that, I know I can have the follow as the content of the page and be fine.

{% for image in site.static_files %}
    {% if image.path contains 'gallery/{{ FOLDER_NAME }}' %}
        <img src="{{ site.baseurl }}{{ image.path }}" />
    {% endif %}
{% endfor %}

Any help or guidance would be greatly appreciated.

Answer 1

You can do this with javascript and without an extension.

Step 1. Put them on the screen using a page or layout.

<div id="cats"></div>
<div class="imagecontainer">
{% for image in site.static_files %}
    {% if image.path contains 'gallery/' %}
        {% assign imagepath = image.path | split: "/" %}
        <img src="{{ site.baseurl }}{{ image.path }}" class="
          {% for subpath in imagepath %}
            {% if forloop.index0 == 3 %}{{ subpath }}{% endif %}
          {% endfor %}
        " />
    {% endif %}
{% endfor %}
</div>

Step 2. Have javascript show/hide them one by one.

/* hide all images */
$('.imagecontainer img').hide();

/* define an array for the categories */
var cats = new Array();

/* fill the array with the categories */
$('.imagecontainer img').each(function() {
  cats[$(this).attr('class')] = 1;
});

/* create a link for each category */
$.each(cats, function(cat, value) {
  $('#cats').append('<a href="#" class="showcat" cat="'+cat+'">'+cat+'</a>');
});

/* make the links toggle the right images */
$('.showcat').click(function() {
  /* hide all images */
  $('.imagecontainer img').hide();
  /* show images in the clicked category */
  $('.imagecontainer img.'+$(this).attr('cat')).show();
});

/* make images rotate */
$('.imagecontainer img').click(function() {
  /* append the clicked image to its container */
  $('.imagecontainer').append($(this));
});

Use this CSS:

div#cats {}
div.imagecontainer {}
img {position: absolute}

You can prevent them from loading in the first place by using data-src instead of src for the images and swap these attributes using javascript/jQuery.

Documentation on Liquid split: https://shopify.github.io/liquid/filters/split/