TWIG template for bootstrap carousel

Support Themes & Styling
1

I’m trying to create a template for bootstrap 4 carousel. https://getbootstrap.com/docs/4.0/components/carousel/ Each segment of the carousel is a series, there are 6 images in a row. I think about something like this:

TWIG 
    {% set image = page.media.images %}<div class="carousel-inner" id="logos" role="listbox">
        <div class="carousel-item active">
            <div class="block py-5">
                <div class="container">
                    {% for row in page.header.rows %}
                    <div class="row d-flex align-items-center">
                        {% if row.image %}
                        <div class="col-4 col-sm-2">
                            {{ row.image.html('', '', 'w-100 d-block img-fluid') }}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

and markdown header:

markdown 
> ---
> title: Partners
> rows:
>   - image: 1.png
>     image: 2.png
>     image: 3.png
>     image: 4.png
>     image: 5.png
>     image: 6.png
>   - image: 7.png
>     image: 8.png
>     image: 9.png
>     image: 10.png
>     image: 11.png
>     image: 12.png
> ---

But this is the wrong way. Can anybody explain how to organize the nested structure. An array of rows in which an array of images.

2

Here are three ways to build a nested list in YAML:

-
  - 1
  - 2
  - 3
- 
  - 4
  - 5
  - 6

- - 1
  - 2
  - 3
- - 4
  - 5
  - 6

- [1,2,3]
- [4,5,6]
1 Like
3

The problem was wrong syntax and setting the active class for the first row of the carousel.
Working version:

md 
firstlines:    
    -
        image: ./partners/1.png
        alt: '1'
    -
        image: ./partners/2.png 
        alt: '2'
    -
        image: ./partners/3.png 
        alt: '3'
    -
        image: ./partners/4.png 
        alt: '4'
    -
        image: ./partners/5.png 
        alt: '5'
    -
        image: ./partners/6.png 
        alt: '6'
lines: 
    -
        partners:
            -
                image: ./partners/7.png 
                alt: '7'
            -
                image: ./partners/8.png 
                alt: '8'
            -
                image: ./partners/9.png 
                alt: '9'
            -
                image: ./partners/10.png 
                alt: '10'
            -
                image: ./partners/11.png 
                alt: '11'
            -
                image: ./partners/12.png 
                alt: '12'
twig 
<div class="carousel-inner" id="logos" role="listbox">
            <div class="carousel-item active">
                <div class="block py-5">
                    <div class="container">
                        <div class="row d-flex align-items-center">
                            {% for partner in page.header.firstlines %}
                            <div class="col-4 col-sm-2">
                                <img class="w-100 d-block img-fluid" src="{{ partner.image }}" alt="{{ partner.alt }}">
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            {% for line in page.header.lines %}
            <div class="carousel-item">
                <div class="block py-5">
                    <div class="container">
                        <div class="row d-flex align-items-center">
                            {% for partner in line.partners %}
                            <div class="col-4 col-sm-2">
                                <img class="w-100 d-block img-fluid" src="{{ partner.image }}" alt="{{ partner.alt }}">
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>