Ditto, display, randomize with 1 parent and multiple children resources

589 Posts

Eoler Reply #11, 10 years, 11 months ago

Quote from: iusemodx at Oct 20, 2015, 08:58 AM

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?

59 Posts

ronbonqqq Reply #12, 10 years, 11 months ago

Quote from: danilocuculic at Oct 20, 2015, 11:35 AM

Quote from: iusemodx at Oct 20, 2015, 08:58 AM
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...:)

953 Posts

iusemodx Reply #13, 10 years, 11 months ago

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

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

953 Posts

iusemodx Reply #14, 10 years, 11 months ago

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

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

discuss.answer

953 Posts

iusemodx Reply #15, 10 years, 11 months ago

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"

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

59 Posts

ronbonqqq Reply #16, 10 years, 9 months ago

Quote from: iusemodx at Oct 26, 2015, 05: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!

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

Answered Ditto, display, randomize with 1 parent and multiple children resources