0

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>

2 Answers2

0

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.

Sean Kimball
  • 4,506
  • 9
  • 42
  • 73
  • Hi Sean, thank you for your reply. But what do you mean by "use a different chunk as it's first tpl.". The articles can be picked randomly, so whichever is the first is fine. –  Jan 28 '15 at 00:21
  • looking at the cheatsheet: http://www.slideshare.net/atmaworks/ditto-cheatsheet-1-2 there is a &tplFirst parameter you can use for the first result so that you can mark it as active. – Sean Kimball Jan 28 '15 at 02:09
  • I still get the same three articles in the three divs that show at a time. Thus, art 7 - art 7 - art 7 and then the next round shows art 9 - art 9 - art 9, etc.??? Hows that possible? –  Jan 28 '15 at 18:01
  • you are outputting [+content+] 3x in each div and only hiding it for small & extra small views. – Sean Kimball Jan 28 '15 at 18:41
  • I referenced three tpl chunks.. tplFirst, tplLast and tpl, in my Ditto call, this is my tpl chunk... next page

    [+pagetitle+]

    [+introtext+]

    but it does not seem to work as I planned.
     –  Jan 29 '15 at 01:09
  • I solved it myself, your answer did not help me and was incomplete. –  Jan 30 '15 at 01:34
0

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.