Jekyll - get all folders in a directory and generate pages

Question

I have a folder structure like this:

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

and so on..

Inside each of these folders is a bunch of images. However, these category folders always change, names as well.

My goal is for jekyll auto to create a separate page for each of these categories. Then on this page, scroll through each image in this folder and show it on the page.

I need help:

• How can I find in a folder /gallery/imagesand grab all folders
• As soon as I recognize all the folders, how do you create a page, such as /gallery/[FOLDER_NAME].htmlfor each of them

As soon as I can do this, I know that I can follow the contents 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 is appreciated.

Answer 1

javascript .

1. , .

<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>

2. javascript / .

/* 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));
});

CSS:

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

, data-src src javascript/jQuery.

: https://shopify.imtqy.com/liquid/filters/split/