How to list files in a directory with Liquid?

Cesco picture Cesco · Jul 3, 2013 · Viewed 11.3k times · Source

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 really lazy I don't want to hard-code the paths needed to display every image inside the layout, and I wouldn't either prefer to use an array to store the list of images.

I was wondering if there's any tag that could ask Jekyll to do these two steps:

  1. Look inside a specific directory
  2. For each file you found in that directory, repeat a block of code

Basically what I'd like to write is something that vaguely resemble this piece of (imaginary) code:

{% for file in directory %}
    <img src="{{ file.url }}" />
{% endfor %}

So if, for example, I have a folder with three files named image01.jpg, image02.jpg, image03.jpg, I'd like that jekyll could build this HTML code for me:

<img src="folder/image01.jpg" />
<img src="folder/image02.jpg" />
<img src="folder/image03.jpg" />

So I had a look at this reference page but I haven't found anything useful for my purpose.

Please, could you give me any suggestion, and if possible, one that doesn't involve the use of a plugin?

Thank you in advance.

Answer

jgatjens picture jgatjens · Feb 10, 2014

You can use this plugin. Copy and paste this code in a file inside the _plugins directory at the root of your Jekyll project.

https://gist.github.com/jgatjens/8925165

Then to use it just add the lines below

{% loop_directory directory:images iterator:image filter:*.jpg sort:descending %}
   <img src="{{ image }}" />
{% endloop_directory %}