Jekyll for loop over all images in a folder?

viraj_os picture viraj_os · Jul 16, 2013 · Viewed 15.8k times · Source

I'd like to make a dirt-simple portfolio of sorts on my jekyll blog. I have all my image files in a folder.

Currently, I have it generating the photos page like this:

<p style="line-height: 100px;">
<img src="photos/01.jpg"><br>
<img src="photos/02.jpg"><br>
<img src="photos/03.jpg"><br>
<img src="photos/04.jpg"><br>
<img src="photos/05.jpg"><br>
<img src="photos/06.jpg"><br>
<img src="photos/07.jpg"><br>
<img src="photos/08.jpg"><br>
<img src="photos/09.jpg"><br>
<img src="photos/10.jpg"><br>
</p>

Which isn't convenient at all if I want to add or remove new photographs. Is it possible to do something like the for loop I have for posts:

{% for post in site.posts %}
     <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{% endfor %}

Except to loop over all the images?

Thanks!

Answer

Arrowcatch picture Arrowcatch · Jan 14, 2016

This worked like a charm for me. No plugins required.

My images are in a assets/images/slider directory.

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

The image.path contains 'images/slider' makes sure that only images in that folder are inserted.

Further reading here and on jekylltalk.

Troubleshooting: As mentioned in the comments, if you have trouble with this approach, you might want to try removing the indentations before the Tag.