[SOLVED] Modular Carousel code is not defined in site

Support Themes & Styling
1

I have the following code as carousel in my HTML theme:

<!-- Carousel Start -->
    <div class="container-fluid p-0 wow fadeIn" data-wow-delay="0.1s">
        <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="w-100" src="img/carousel-1.jpg" alt="Image">
                    <div class="carousel-caption">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-8">
                                    <h1 class="display-1 text-white mb-5 animated slideInDown">Solidarisch. Lokal. Gesund. Lecker.</h1>
                                    <a href="" class="btn btn-primary py-sm-3 px-sm-4">Explore More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="w-100" src="img/carousel-2.jpg" alt="Image">
                    <div class="carousel-caption">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-7">
                                    <h1 class="display-1 text-white mb-5 animated slideInDown">Was ist eine Solawi?</h1>
                                    <a href="" class="btn btn-primary py-sm-3 px-sm-4">Explore More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
    <!-- Carousel End -->

I wanna do a modular with this code above.

So I has done the folloding code in “user/pages/modular/carousel.md”:

---
title: Carousel
content:
    items:
        - image:
              label: Image 1
              type: filepicker
              folder: '@self'
              preview_images: true
              accept:
                - image/*
          title:
              label: Title 1
              type: text
          caption:
              label: Caption 1
              type: textarea
        - image:
              label: Image 2
              type: filepicker
              folder: '@self'
              preview_images: true
              accept:
                - image/*
          title:
              label: Title 2
              type: text
          caption:
              label: Caption 2
              type: textarea
---

Then I craeted in “user/themes/mytheme/modular/carousel.html.twig”:

{% set content = page.content %}
{% set items = content.items %}
{% set id = 'header-carousel-' ~ random_string(8) %}
{% set delay = 0.1 %}

<div class="container-fluid p-0 wow fadeIn" data-wow-delay="{{ delay }}s">
    <div id="{{ id }}" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            {% for item in items %}
            {% set active = (loop.index == 1) ? 'active' : '' %}
            <div class="carousel-item {{ active }}">
                <img class="w-100" src="{{ item.image.url }}" alt="{{ item.image.alt }}">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <h1 class="display-1 text-white mb-5 animated slideInDown">{{ item.title }}</h1>
                                <p>{{ item.caption }}</p>
                                <a href="" class="btn btn-primary py-sm-3 px-sm-4">Explore More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#{{ id }}" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#{{ id }}" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>

In my “user/themes/mytheme/templates/home.html.twig” I put the following code into the template:


   {% block carousel %}
    <!-- Carousel Start -->
    {% include 'user/themes/mytheme/templates/modular/carousel.html.twig' %}
    <!-- Carousel End -->
    {% endblock %}

Now the error message from Grav told me:
Template “user/themes/solawi/templates/modular/carousel.html.twig” is not defined in “home.html.twig” at line 49.

What is missing? What is wrong?

2

IIRC you should use something like

{% include 'theme://templates/modular/carousel.html.twig' %}

It’s been a while, so I might be wrong :slight_smile:

3

No, that helped not.The error is still there.

4

Path is relative to template, so it should works with:

{% include modular/carousel.html.twig %}
5

I think it should be solved. After changing your code a bit now the site is presented again.

{% include 'modular/carousel.html.twig' %}

6

@wmcig, Instead of adding “SOLVED” to the title, please use the ‘Solution’ icon in the lower right corner of the reply that shows the solution, or leads to the solution.