MODX (Evo) Ditto и Carousel с несколькими DIV, в которые необходимо загрузить идентификаторы дочерних ресурсов

Question

Это касается MODX Evolution, Ditto и Bootstrap3 Carousel.

Моя цель - показать загруженные Ditto статьи в отдельных DIV, представленных в карусели. Мой код показывает только все три статьи в одном DIV, и все DIV показывают одинаковые (!) Три статьи (первые три). Я предполагаю, что проблема заключается в моем фрагменте HTML, но если я изменю код, я потеряю отзывчивость для карусели. Где я не прав?

• Это карусель с тремя уникальными DIV, показывающими одновременно. Всего 12 х DIV, которые отображаются в 4 раундах (= 4 х 3).
• Каждый DIV должен показывать одну уникальную загруженную статью, то есть один идентификатор ресурса. Таким образом, три уникальных статьи показывают одновременно каждый раунд (всего 4 раунда).
• У меня нет JS или JQuery для моей карусели. Это все адаптивный Bootstrap3.
• Шаблон имеет id=2. Категория ресурса статей имеет id=9, а ее дочерние элементы имеют id=20 до id=31 (= всего 12 статей).

ШАБЛОН (= id=2) ВЫЗОВ:

[[Ditto? &parents=`9` &display=`12` &orderBy=`createdon DESC` &tpl=`articles`]]

HTML CHUNK articles (оригинальный HTML-код -> 4 элемента x 3 DIV):

<div class="carousel-inner">
            <div class="item active">
                <div class="col-md-4 col-sm-6">
                    [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                    [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                   [+content+]
                </div>
            </div>

            <div class="item">
                <div class="col-md-4 col-sm-6">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                    [+content+]
                </div>
            </div>

            <div class="item">
                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                    [+content+]
                </div>
            </div>

            <div class="item">
                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                  [+content+]
                </div>
            </div>
        </div>

Answer 1

Я решил эту проблему, поместив вызов Ditto в блок carousel_articles для каждого индивидуального div (с разными родителями, каждый из которых соответствует моим категориям статей), и использовал параметр randomize.

Answer 2

Что вы хотите сделать, это:

<div class="carousel-inner">

[[Ditto? &parents=`9` &display=`12` &orderBy=`createdon DESC` &tpl=`articles`]]

</div>

& tpl chunk:

<div class="item [+active+]">
   <div class="col-md-4 col-sm-6">
     [+content+]
   </div>

   <div class="col-md-4 col-sm-6 hidden-xs">
      [+content+]
    </div>

    <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
       [+content+]
   </div>
</div>

Позвольте так же сгенерировать элемент div.

Вам нужно будет либо написать скрипт, чтобы выяснить, какой чанк будет первым, и пометить его класс как "активный", либо у ditto может быть атрибут для использования другого чанка в качестве первого tpl.

Может быть что-то вроде:

[[Ditto? 
   &parents=`9` 
   &display=`12` 
   &orderBy=`createdon DESC` 
   &tpl=`articles`
   &tplFirst=`articles-01`
]]

Это предположение - вам придется проверять документацию на предмет актуального синтаксиса и доступности.