Use Markdown to Loop Through a Folder of Images
A little bit of Markdown can go a long way and produce static HTML with much less typing!
Loop through a folder of images and create img tags for each.
Markdown:
{% for image in site.static_files %}
{% if image.path contains 'images/folder/' %}
![image]({{ image.path }} 'image')
{% endif %}
{% endfor %}
Resulting HTML:
<p><img src="/images/folder/01.png" alt="image" title="icon" /></p>
<p><img src="/images/folder/02.png" alt="image" title="icon" /></p>
<p><img src="/images/folder/03.png" alt="image" title="icon" /></p>
<p><img src="/images/folder/04.png" alt="image" title="icon" /></p>
<p><img src="/images/folder/05.png" alt="image" title="icon" /></p>
<p><img src="/images/folder/06.png" alt="image" title="icon" /></p>
<p><img src="/images/folder/07.png" alt="image" title="icon" /></p>
<p><img src="/images/folder/08.png" alt="image" title="icon" /></p>
<p><img src="/images/folder/09.png" alt="image" title="icon" /></p>
<p><img src="/images/folder/10.png" alt="image" title="icon" /></p>
Loop through a folder of images and use in a table.
Markdown:
{% for i in (1..5) %}![image](/images/folder/image{{ i }}.png 'image') {{ i }}|{% endfor %}
{% for i in (6..10) %}![image](/images/folder/image{{ i }}.png 'image') {{ i }}|{% endfor %}
Resulting HTML:
<table>
<tbody>
<tr>
<td><img src="/images/folder/image1.png" alt="image" title="image" /> 1</td>
<td><img src="/images/folder/image2.png" alt="image" title="image" /> 2</td>
<td><img src="/images/folder/image3.png" alt="image" title="image" /> 3</td>
<td><img src="/images/folder/image4.png" alt="image" title="image" /> 4</td>
<td><img src="/images/folder/image5.png" alt="image" title="image" /> 5</td>
</tr>
<tr>
<td><img src="/images/folder/image6.png" alt="image" title="image" /> 6</td>
<td><img src="/images/folder/image7.png" alt="image" title="image" /> 7</td>
<td><img src="/images/folder/image8.png" alt="image" title="image" /> 8</td>
<td><img src="/images/folder/image9.png" alt="image" title="image" /> 9</td>
<td><img src="/images/folder/image10.png" alt="image" title="image" /> 10</td>
</tr>
</tbody>
</table>