Hi guys,
I want to create a macro for image carousel, which takes the path of a directory, and renders the image of that directory in the carousel.
I have created the macro with static images but I don’t know how I can read the filenames within a directory.
this is how the simple carousel looks
{% macro image_carousel(directory_path="") %}
<script type="text/javascript" defer src="/js/carousel.js"></script>
<div class="carousel">
<img
loading="lazy"
src="/images/screenshots/2024-12-07_12-57-55.png"
/>
<img
loading="lazy"
src="/images/screenshots/Screenshot_20220105_173608.png"
/>
{% endmacro image_carousel %}
The only needed thing is to loop <img>
and replace src
with filenames.
Pretty certain you cannot read filenames within a directory.
Perhaps the best is cleaving path and filenames
{% macro image_carousel(path, files) %}
…
for x in files
Use in a template
{{image_carousel(path = “/images/screenshots/”, files=[“2024-12-07_12-57-55.png”, “Screenshot_20220105_173608.png”])}}
alternatively pass a csv string
1 Like
Thank you. this is an option, although having a carousel of let’s say 10 images gets pretty messy, but it’s still better than hardcoding them.
Thank you very much adrian.
This solution fixed my problem. But I still think there should be the ability to read files within a directory. It is quite useful.
Imho one would need to write a Tera extension in rust.
An even easier solution is renaming your files using an index for the carousel
images/carousel_1/
image_001.png
image_002.png
images/carousel_2/
image_001.png
image_002.png
I now use .webp for almost all images.
Heres a shell script for converting filenames
powershell