MODX (Evo) Ditto and Carousel with multiple DIVs in which children resource IDs need to be loaded

Question

This concerns MODX Evolution, Ditto and Bootstrap3 Carousel.

My aim is to show Ditto loaded articles in individual DIVs presented in a carousel. My code only shows all three articles inside one DIV and all DIVs show the same (!) three articles (the first three). My guess is that the problem lies in my HTML chunk, but if I change the code then I loose the responsiveness for the carousel. Where am I wrong?

• It is a carousel with three unique DIVs showing at once. Total of 12 x DIVs which get displayed in 4 rounds (= 4 x 3).
• Each DIV has to show one unique loaded article, i.e. one resource ID. So, three unique articles show at once each round (of 4 rounds in total).
• I have no JS or JQuery for my carousel. It is all responsive Bootstrap3 made.
• The template has id=2. The articles resource category has id=9 and its children have id=20 till id=31 (= in total 12 articles).

TEMPLATE (= id=2) DITTO CALL:

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

HTML CHUNK articles (original HTML code --> 4 items x 3 DIVs):

<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

I solved it by placing a Ditto call within the carousel_articles chunk for each indivdual div (with different parents each matching my articles categories) and use the randomize parameter.

Answer 2

What you want to do is:

<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>

Let ditto generate the item divs.

You will have to either write a script to figure out which chunk will be the first & mark it's class "active" OR there might be an attribute for ditto to use a different chunk as it's first tpl.

Maybe something like:

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

That is a guess - you will have to check the ditto docs for the actual syntax and availability.