Блог

Главная - Вопросы по программированию - Решение для группировки элементов в цикле с помощью древесины и веток

Решение для группировки элементов в цикле с помощью древесины и веток

#twig #timber

#twig #timber

Вопрос:

Часто мне нужно выполнить сложную компоновку динамических элементов, таких как галереи. Вот один пример:

 <ul>
<li class="slide">
    <img src="img_01.jpg">
    <img src="img_02.jpg">
</li>
<li class="slide">
    <img src="img_03.jpg">
    <img src="img_04.jpg">
</li>
<li class="slide">
    <img src="img_05.jpg">
    <img src="img_06.jpg">
</li>
</ul>

Мне удалось сделать это со следующим фрагментом. Но я хотел бы получить несколько предложений, если это возможно, о том, как сделать его более гибким или более простым, например, группировать по любому числу. Возможно, с помощью cycle() или любого другого метода. Я получал странные результаты, используя нотацию slice() или array[1: 2].

 <ul>
{% for image in gallery %}
{% set current = loop.index %}
{% set next = current   1 %}
    {% if current is odd %}
        <li class="slide">
            {% for image in gallery %}
                {% if loop.index in [current,next] %}
                {% set th = TimberImage(image) %}
                    <img src="{{th.src}}">
                {% endif %}
            {% endfor %}
        </li>
    {% endif %}
{% endfor %}
</ul>

Любые предложения приветствуются.
Timber становится очень удобным для быстрого ввода и вывода исправлений с помощью Timber::compile или пользовательских тем с полной маршрутизацией. Цель вопроса — создать некоторый фрагмент, который можно использовать повторно.

Слава создателям. https://github.com/timber/timber

Ответ №1:

Вы можете обратиться к rest of the division следующему коду (здесь приведены рабочие решения):

 {# number of element for every section #}
{% set section = 2%}

<ul>
{% for image in gallery %}
   {% if loop.index % section == 1  %}
     <li class="slide">
   {% endif %}
   {% set th = TimberImage(image) %}
       <img src="{{th.src}}">
   {% if loop.index % section == 0 or loop.last %}
     </li>
  {% endif %}
{% endfor %}
</ul>

Вы можете легко повторно использовать этот код, создавая макрос Twig, используя в качестве параметра галерею и номер элемента для раздела (выделено переменной section

Комментарии:

1. Отличное решение! Большое спасибо, что нашли время ответить. Определенно более лаконичный и многоразовый.

Ответ №2:

Вот конечный результат, основанный на предложении @Matteo для макроса: https://gist.github.com/lithiumlab/5ee0454b0a77b1cc26fc0ce8ba52fd80

просмотры/single.twig:

 {% import 'utils.twig' as utils %}
{{utils.group_collection(gallery,3)}}

просмотры/utils.twig:

 {% macro group_collection(collection, groupby) %}
{% set section = groupby|default(2) %}

    <ul>
    {% for element in collection %}
       {% if loop.index % section == 1  %}
         <li class="group">
       {% endif %}
       {% set th = TimberImage(element) %}
           <img src="{{th.src}}">
       {% if loop.index % section == 0 or loop.last %}
         </li>
      {% endif %}
    {% endfor %}
    </ul>

{% endmacro %}
Метки: