Macro for image carousel

Support
1

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.

2

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
3

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.

4

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.

5

Imho one would need to write a Tera extension in rust. :crab:

6

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