Разделите данные на список из 2 столбцов, используя Twig

Я пытаюсь разделить данные на 2 столбца.

Я хотел бы иметь такую ​​структуру:

<div class="accordion">
    <div class="accordion__list">
        <div class="accordion__item">
            <p class="accordion__text">Title</p>
            <div class="accordion__content">
                <p>Content</p>
            </div>
        </div>
        <div class="accordion__item">
            <p class="accordion__text">Title</p>
            <div class="accordion__content">
                <p>Content</p>
            </div>
        </div>
    </div>
    <div class="accordion__list">
        <div class="accordion__item">
            <p class="accordion__text">Title</p>
            <div class="accordion__content">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

Чтобы разделить .accordion__item блок div на 2 столбца .accordion__list

Для этого я написал это с помощью TWIG:

<div class="accordion">
    <div class="accordion__list">
        {% for liste in bloc.listes[:(bloc.listes|length / 2)|round(0, 'floor')] %}
        <div class="accordion__item">
            <p class="accordion__text">{{ liste.titre }}</p>

            <div class="accordion__content">
                {% for contenu in liste.contenu %}
                    <p>{{ contenu.texte }}</p>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="accordion__list">
        {% for liste in bloc.listes[(bloc.listes|length / 2)|round(0, 'floor'):] %}
        <div class="accordion__item">
            <p class="accordion__text">{{ liste.titre }}</p>

            <div class="accordion__content">
                {% for contenu in liste.contenu %}
                    <p>{{ contenu.texte }}</p>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

Но это не работает. Каждый раз, когда я получаю четное число в своих двух столбцах, последний элемент из моего списка заменяет последний элемент в последнем столбце.

Вот пример моей проблемы

введите здесь описание изображения

И я хотел бы иметь это:

введите здесь описание изображения


twig timber
person Jandon    schedule 10.01.2018    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Почему бы вам просто не зациклить коллекцию дважды? Так намного проще,

{% set items = ['item1', 'item2', 'item3', 'item4', 'item5', ] %}

<div class="half">
{% for item in items %}
    {% if not loop.index is even %}
    <div >{{ item }}</div>
    {% endif %}
{% endfor %}
</div>
<div class="half">
{% for item in items %}
    {% if loop.index is even %}
    <div >{{ item }}</div>
    {% endif %}
{% endfor %}
</div>
person DarkBee    schedule 10.01.2018
comment
У меня нет только одной информации для каждого элемента. У меня есть заголовок и текст - person Jandon; 10.01.2018
comment
Не видите смысла? Это просто пример того, как это сделать. Ничто не мешает вам применить свой шаблон к этой логике - person DarkBee; 10.01.2018

arrow_upward
1
arrow_downward

Я бы решил это с помощью css вместо Timber. Просто создайте список, в котором используются встроенные блоки шириной 50%.

. accordion {
    position: relative;
}
. accordion__list {
    display: inline-block;
}

Или это слишком просто?

person Beee    schedule 06.02.2018

arrow_upward
0
arrow_downward

Не используйте два цикла, вы можете подумать о производительности...

  {% set firstHalf = "" %}
    {% set secondHalf = "" %}

    {% for item in items %}
        {% if loop.index is odd %}
           {% set firstHalf %}{{ firstHalf }} <div >{{ item }}</div> {% endset %}
        {% else %}
           {% set secondHalf %}{{ secondHalf }} <div >{{ item }}</div> {% endset %}
        {% endif %}
    {% endfor %}

    <div>
       {{ firstHalf }}
    </div>
    <div>
       {{ secondHalf }}
    </div>
person BENARD Patrick    schedule 12.11.2019