How to list files in a directory with Liquid?

Question

I\'m trying to learn how to use Jekyll along with Bootstrap; while studying them, I decided that I\'d like to have an image carousel on my homepage.

Since I\'m real

Answer 1

It's not completely impossible without a plugin, but of course you'll need to use some kludges. For example, you can put the image paths in your YAML front matter and they'll be available when Jekyll processes your page.

---
carousel_images:
  - images/img01.png
  - images/img02.png
  - images/img03.png
---

# Lots of page-related code.

{% for img in page.carousel_images %}
  # Do something.
{% endfor %}

For site-wide images, you'll need a plugin. But if you want your images to be located in a specific page or post, this should do. :)

Hope that helps!

Answer 2

edit (2015-11-09): Jekyll has since gotten some updates, especially site.static_pages. Check @raphael answer for a possible solution.

It is impossible without using a plugin. You do not have I/O capabilities inside Liquid Templates.

If your images have front matter, they might get processed by Jekyll and be stored in the site.pages array and thus being accessible, but I wouldn't recommend placing Front Matter on images (might make sense for SVGs, but not for anything else).

Your best bet is probably to write a little shell script that scans your folder for images and creates an images.json file. This file could then be loaded via Ajax. You'd just have to recreate your images.json file every time you upload a new file (if you are using Git, you could to that as a pre-commit hook).

Answer 3

Refer to docs you can list files in _post, _data as long there is its name in front matter.
For images we need to put them first by _collection

{% for file_hash in site.post %}
{% assign file = file_hash[1] %}
{{ file.name }}
{% endfor %}

Answer 4

Based on @raphael's answer, you could use the following code to list jpg files:

{% for file in site.static_files %}
  {% if file.extname == ".jpg" -%}
     * [{{ file.path }}]({{ site.baseurl }}{{ file.path }})
  {%- endif %}
{% endfor %}

You'd probably like to remove some of the newline characters to get a single list in the output (instead of lists with only one element).

Answer 5

If you don't want to use a plugin, another way to get the filename is to modify directly the ruby static_files in jekyll: Path ex: C:\Ruby22-x64\lib\ruby\gems\x.x.x\gems\jekyll-x.x.x\lib\jekyll

Edit static_files.rb and change:

def to_liquid
  {
    "extname"       => extname,
    "modified_time" => modified_time,
    "path"          => File.join("", relative_path)
  }
end

to:

def to_liquid
  {
    "extname"       => extname,
    "modified_time" => modified_time,
    "path"          => File.join("", relative_path),
    "name"          => @name
  }
end

You're now able to list each "png" file and get its name in a DIR_NAME directory using:

{% for file in site.static_files %}
  {% if file.extname == ".png" and file.path contains '/DIR_NAME/' %} 
   {{ file.name }}
  {% endif %}
{% endfor %}

Answer 6

Using the Jekyll collections API, which, as of 2015-08-07 came with the big warning

Collections support is unstable and may change

Define a collection in _config.yml and creates an _images folder in your root directory

collections:
- images

Without having to add YAML front-matter to your images, Jekyll will:

Files in collections that do not have front matter are treated as static files and simply copied to their output location without processing.

Static files have the following attributes:

• file.path
• file.extname

And then the code on your page would be something like (untested):

{% for image in site.images %}
     {% if image.extname == 'jpg' %}
         <img src="{{ file.url }}" />
     {% endif %}
{% endfor %}