We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 36416
    • 589 Posts
    Quote from: iusemodx at Oct 20, 2015, 01:58 PM
    Although I still think how you have it setup is OTT - you only need one Ditto call

    Yeah - what's up with 6 calls, not understanding why are they needed?
      • 49667
      • 59 Posts
      Quote from: danilocuculic at Oct 20, 2015, 04:35 PM
      Quote from: iusemodx at Oct 20, 2015, 01:58 PM
      Although I still think how you have it setup is OTT - you only need one Ditto call

      Yeah - what's up with 6 calls, not understanding why are they needed?

      I tried to set it up differenty, but no success.
      It is supposed to be a carousel with 3 slides showing at the same time and each of the 3 slides is different. When scrolling left or right, the next set of 3 slides show again with each slide having a different and unique content (parent child).

      Here my code:

      TEMPLATE:
      <div id="homeCarousel" class="chunk_carousel">[!Ditto? &parents=`2,3,4` &display=`1` &randomize=`1` &tpl=`chunk_carousel-layout` !]</div>


      CHUNK: chunk_carousel
      <div class="home_carousel_wrap">
              <div class="home_carousel_inner">
                  <div class="home_carousel_list" id="homeCarousel">
                      <div class="single_slide">
                          <div class="well carousel">
                              <div class="article-image-summary">
                                  <a href="[~[+id+]~]"><img alt="[*longtitle*]" src=
                                  "[+tv_article-intro-image+]"></a>
                              </div>
                              <div class="title-article-carousel">
                                  <a href="[~[+id+]~]">[+pagetitle+]</a>
                              </div>
                          </div>
                          <div class="single_slide">
                              <div class="well carousel">
                                  <div class="article-image-summary">
                                      <a href="[~[+id+]~]"><img alt="[*longtitle*]"
                                      src="[+tv_article-intro-image+]"></a>
                                  </div>
                                  <div class="title-article-carousel">
                                      <a href="[~[+id+]~]">[+pagetitle+]</a>
                                  </div>
                              </div>
                              <div class="single_slide">
                                  <div class="well carousel">
                                      <div class="article-image-summary">
                                          <a href="[~[+id+]~]"><img alt=
                                          "[*longtitle*]" src=
                                          "[+tv_article-intro-image+]"></a>
                                      </div>
                                      <div class="title-article-carousel">
                                          <a href="[~[+id+]~]">[+pagetitle+]</a>
                                      </div>
                                  </div>
                                  <div class="single_slide">
                                      <div class="well carousel">
                                          <div class="article-image-summary">
                                              <a href="[~[+id+]~]"><img alt=
                                              "[*longtitle*]" src=
                                              "[+tv_article-intro-image+]"></a>
                                          </div>
                                          <div class="title-article-carousel">
                                              <a href="[~[+id+]~]">[+pagetitle+]</a>
                                          </div>
                                      </div>
                                      <div class="single_slide">
                                          <div class="well carousel">
                                              <div class="article-image-summary">
                                                  <a href="[~[+id+]~]"><img alt=
                                                  "[*longtitle*]" src=
                                                  "[+tv_article-intro-image+]"></a>
                                              </div>
                                              <div class="title-article-carousel">
                                                  <a href=
                                                  "[~[+id+]~]">[+pagetitle+]</a>
                                              </div>
                                          </div>
                                          <div class="single_slide">
                                              <div class="well carousel">
                                                  <div class="article-image-summary">
                                                      <a href="[~[+id+]~]"><img alt=
                                                      "[*longtitle*]" src=
                                                      "[+tv_article-intro-image+]"></a>
                                                  </div>
                                                  <div class=
                                                  "title-article-carousel">
                                                      <a href=
                                                      "[~[+id+]~]">[+pagetitle+]</a>
                                                  </div>
                                              </div>
                                              <div class="single_slide">
                                                  <div class="well carousel">
                                                      <div class=
                                                      "article-image-summary">
                                                          <a href=
                                                          "[~[+id+]~]"><img alt=
                                                          "[*longtitle*]" src=
                                                          "[+tv_article-intro-image+]"></a>
                                                      </div>
                                                      <div class=
                                                      "title-article-carousel">
                                                          <a href=
                                                          "[~[+id+]~]">[+pagetitle+]</a>
                                                      </div>
                                                  </div>
                                                  <div class="single_slide">
                                                      <div class="well carousel">
                                                          <div class=
                                                          "article-image-summary">
                                                              <a href=
                                                              "[~[+id+]~]"><img alt=
                                                              "[*longtitle*]" src=
                                                              "[+tv_article-intro-image+]"></a>
                                                          </div>
                                                          <div class=
                                                          "title-article-carousel">
                                                              <a href=
                                                              "[~[+id+]~]">[+pagetitle+]</a>
                                                          </div>
                                                      </div>
                                                      <div class="single_slide">
                                                          <div class="well carousel">
                                                              <div class=
                                                              "article-image-summary">
                                                              <a href="[~[+id+]~]">
                                                                  <img alt=
                                                                  "[*longtitle*]"
                                                                  src="[+tv_article-intro-image+]"></a>
                                                              </div>
                                                              <div class=
                                                              "title-article-carousel">
                                                              <a href="[~[+id+]~]">
                                                                  [+pagetitle+]</a>
                                                              </div>
                                                          </div>
                                                          <div class="single_slide">
                                                              <div class=
                                                              "well carousel">
                                                                  <div class=
                                                                  "article-image-summary">
                                                                  <a href=
                                                                  "[~[+id+]~]"><img alt="[*longtitle*]"
                                                                      src=
                                                                      "[+tv_article-intro-image+]"></a>
                                                                  </div>
                                                                  <div class=
                                                                  "title-article-carousel">
                                                                  <a href=
                                                                  "[~[+id+]~]">[+pagetitle+]</a>
                                                                  </div>
                                                              </div>
                                                              <div class=
                                                              "single_slide">
                                                                  <div class=
                                                                  "well carousel">
                                                                      <div class=
                                                                      "article-image-summary">
                                                                      <a href=
                                                                      "[~[+id+]~]">
                                                                          <img alt=
                                                                          "[*longtitle*]"
                                                                          src=
                                                                          "[+tv_article-intro-image+]"></a>
                                                                      </div>
                                                                      <div class=
                                                                      "title-article-carousel">
                                                                      <a href=
                                                                      "[~[+id+]~]">
                                                                          [+pagetitle+]</a>
                                                                      </div>
                                                                  </div>
                                                                  <div class=
                                                                  "single_slide">
                                                                      <div class=
                                                                      "well carousel">
                                                                      <div class=
                                                                      "article-image-summary">
                                                                          <a href="[~[+id+]~]">
                                                                              <img alt="[*longtitle*]"
                                                                              src=
                                                                              "[+tv_article-intro-image+]"></a>
                                                                          </div>
                                                                          <div class=
                                                                          "title-article-carousel">
                                                                          <a href="[~[+id+]~]">
                                                                              [+pagetitle+]</a>
                                                                          </div>
                                                                      </div>
                                                                  </div>
                                                                  <div class=
                                                                  "clearfix slider_ctrl">
                                                                  <a class=
                                                                  "pull-left slider_arrow arrow_left fa fa-chevron-left"
                                                                      href="#" style=
                                                                      "font-style: italic">
                                                                      </a> <a class=
                                                                      "pull-right slider_arrow arrow_right fa fa-chevron-right"
                                                                      href="#" style=
                                                                      "font-style: italic">
                                                                      </a>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>


      CHUNK: chunk_carousel-layout
      <div class="well carousel">
              <div class="article-image-summary">
                  <a href="[~[+id+]~]"><img alt="[*longtitle*]" src=
                  "[+tv_article-intro-image+]"></a>
              </div>
      
              <div class="title-article-carousel">
                  <a href="[~[+id+]~]">[+pagetitle+]</a>
              </div>
          </div>


      Hope someone can help to fix this... thanks on forehand...:)
        • 13226
        • 953 Posts
        I dont understand - you marked this as answered, now its not solved huh

        I have already posted the answer - if that doesnt work for you then there must be something wrong your end
          • 13226
          • 953 Posts
          Looking at "CHUNK: chunk_carousel" the HTML seems wierd - if you format the source code you will see that the individual elements dont stack as expected - the </div> for single_slide is at the bottom instead of after each "well carousel"

          Or is it supposed to be like that, if so, thats some strange nesting

          Using asterix for the longtitle wont work - you need to use the plus sign
          • discuss.answer
            • 13226
            • 953 Posts
            Looking at your code I would expect the following:

            Snippet call:
            <div id="homeCarousel" class="chunk_carousel">
              <div class="home_carousel_wrap">
                <div class="home_carousel_inner">
                  <div class="home_carousel_list" id="homeCarousel">
                    [!Ditto? &parents=`2,3,4` &display=`12` &randomize=`1` &tpl=`chunk_carousel-layout`!]
                  </div>
                </div>
              </div>
            </div>

            Individual element chunk (chunk_carousel-layout):
            <div class="single_slide">
              <div class="well carousel">
                <div class="article-image-summary"><a href="[~[+id+]~]"><img alt="[+longtitle+]" src="[+tv_article-intro-image+]"></a></div>
                <div class="title-article-carousel"><a href="[~[+id+]~]">[+pagetitle+]</a></div>
              </div>
            </div>


            Note that I have changed the display value in the snippet call from "1" to "12"
              • 49667
              • 59 Posts
              Quote from: iusemodx at Oct 26, 2015, 10:40 PM
              Looking at your code I would expect the following:

              Hi iusemodx,

              Sorry for my delayed reply.

              The question is solved thanks to your great help.

              I made the mistake of haven put the Ditto call in my template, instead of my chunk.
              Now it works perfectly! smiley

              Thanks again! [ed. note: ronbonqqq last edited this post 8 years, 3 months ago.]