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

59 Posts

ronbonqqq Reply #1, 10 years, 11 months ago

Hi,

I have ONE parent and multiple children resources within that parent.

Also a 3 slides carousel on my webpage and the idea is that in each of those 3 slides a different child resource shows.

I implemented this code, but somehow all 3 slides show the same child resource, even when you scroll right or left to the next 3 slides, again the same child resource shows.

How to get for each slide a different randomized child resource to show?

PARENT (14)
- child 1 (20)
- child 2 (21)
- child 3 (22)
- child 4 (23)
etc.

<div id="homeCarousel" class="home_carousel_list">
                  	<div class="single_slide">
                        [!Ditto? &parents=`14` &display=`1` &randomize=`1`
                        &tpl=`LAYOUT` !]
                    </div>
				<div class="single_slide">
                        [!Ditto? &parents=`14` &display=`1` &randomize=`1`
                        &tpl=`LAYOUT` !]
                    </div>
				<div class="single_slide">
                        [!Ditto? &parents=`14` &display=`1` &randomize=`1`
                        &tpl=`LAYOUT` !]
                    </div>
				<div class="single_slide">
                        [!Ditto? &parents=`14` &display=`1` &randomize=`1`
                        &tpl=`LAYOUT` !]
                    </div>
				<div class="single_slide">
                        [!Ditto? &parents=`14` &display=`1` &randomize=`1`
                        &tpl=`LAYOUT` !]
                    </div>
				<div class="single_slide">
                        [!Ditto? &parents=`14` &display=`1` &randomize=`1`
                        &tpl=`LAYOUT` !]
                    </div>

This question has been answered by iusemodx. See the first response.

788 Posts

breezer Reply #2, 10 years, 11 months ago

I don't know much about Ditto, but perhaps a single snippet to populate the slides would do a more efficient job. If you can post your LAYOUT template I can put something together for you to try.

xforum
http://frsbuilders.net (under construction) forum for evolution

953 Posts

iusemodx Reply #3, 10 years, 11 months ago

may or may not be a stupid question:

Why don't you use the display property and set a template chunk ?

Example Ditto call:

<div id="homeCarousel" class="home_carousel_list">
[[Ditto? &parents=`14` &display=`12` &randomize=`1` &orderBy=`pagetitle ASC` &tpl=`carouselitem`]]
</div>

Just on the safe side - you may have to play with the cache settings due to randomising - call the snippet cached or uncached depending on the page cache setting.

Possible chunk (carouselitem):

<div class="single_slide">[+content+]</div>

Visually you will only see 3 at any one time, so the display property can be set to whatever you want

The above code works, I use something pretty much the same - I display 4 elements at a time in a set of 3 slides / carousels giving me a total of 12 that randomise (through all child elements) on page refresh

My call is slightly different in that I have "depth & Published Only" as well, due to nesting

My page is cached and the Ditto call is uncached. [ed. note: iusemodx last edited this post 10 years, 11 months ago.]

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

59 Posts

ronbonqqq Reply #4, 10 years, 11 months ago

Quote from: breezer at Oct 17, 2015, 01:30 PM

I don't know much about Ditto, but perhaps a single snippet to populate the slides would do a more efficient job. If you can post your LAYOUT template I can put something together for you to try.

Hi breezer,

Here my layout:

<div class="well carousel">
        <div class="image">
            <a href="[~[+id+]~]"><img alt="[*longtitle*]" src=
            "[+tv_image+]"></a>
        </div>

        <div class="title">
            <a href="[~[+id+]~]">[+pagetitle+]</a>
        </div>
    </div>

I really dont understand that why with my above code (parents, display and randomise properties), I cannot get 3 slides to show at once and each slide having a unique different child resource from parent (14)???

59 Posts

ronbonqqq Reply #5, 10 years, 11 months ago

Quote from: iusemodx at Oct 17, 2015, 05:29 PM

may or may not be a stupid question:

Why don't you use the display property and set a template chunk ?

My page is cached and the Ditto call is uncached.

Hi,

I think my code already has the display, randomize and template chunk properties included.
I also played with cache but nothing worked.

I think my code is correct, that it should show 3 slides at a time and in each slide a different unique child resource should show from parent (14)? I am surprised... sad

953 Posts

iusemodx Reply #6, 10 years, 11 months ago

Quote from: ronbonqqq at Oct 19, 2015, 06:43 AM

I think my code already has the display, randomize and template chunk properties included.

Yes, sorry, saw that after I had re-read your post after posting my answer - was a long day

My code works so there must be something your end - sorry can't post a URL

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

953 Posts

iusemodx Reply #7, 10 years, 11 months ago

Just out of interest - what is the full code, example:

<div id="homeCarousel" class="home_carousel_list"> 
  <!-- Slide 1 -->
  <div class="single_slide">
    <div class="well carousel">
      <div class="image"><a href="#"><img alt="" src=""></a></div>
      <div class="title"><a href="#">[+pagetitle+]</a></div>
    </div>
  </div>
  <!-- / Slide 1 --> 
  <!-- Slide 2 -->
  <div class="single_slide">
    <div class="well carousel">
      <div class="image"><a href="#"><img alt="" src=""></a></div>
      <div class="title"><a href="#">[+pagetitle+]</a></div>
    </div>
  </div>
  <!-- / Slide 2 --> 
  <!-- Slide 3 -->
  <div class="single_slide">
    <div class="well carousel">
      <div class="image"><a href="#"><img alt="" src=""></a></div>
      <div class="title"><a href="#">[+pagetitle+]</a></div>
    </div>
  </div>
  <!-- / Slide 3 --> 
</div>

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

953 Posts

iusemodx Reply #8, 10 years, 11 months ago

I have just checked my site and the code is as follows:

<ul>
  <li><a href="#">
    <figure><img src="images/alias.jpg" alt="Pagetitle">
      <figcaption>Longtitle</figcaption>
    </figure>
    </a></li>
  <li><a href="#">
    <figure><img src="images/alias.jpg" alt="Pagetitle">
      <figcaption>Longtitle</figcaption>
    </figure>
    </a></li>
  <li><a href="#">
    <figure><img src="images/alias.jpg" alt="Pagetitle">
      <figcaption>Longtitle</figcaption>
    </figure>
    </a></li>
  <li><a href="#">
    <figure><img src="images/alias.jpg" alt="Pagetitle">
      <figcaption>Longtitle</figcaption>
    </figure>
    </a></li>
</ul>

Broken down:

Snippet call:

<ul>
  [!Ditto? &parents=`11,12` &tpl=`RandomItem` &depth=`0` &hideFolders=`1` &display=`12` &orderBy=`pub_date DESC` &showPublishedOnly=`1` &randomize=`1`!]
</ul>

Template chunk:

<li><a href="[~[+id+]~]">
  <figure><img src="images/[+alias+].jpg" alt="[+pagetitle+]">
    <figcaption>[+longtitle+]</figcaption>
  </figure>
  </a></li>

Class names and id's have been removed as they are of no interest here

Page set to "Cacheable" and as can be seen in the call, Ditto is called "uncached"

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

59 Posts

ronbonqqq Reply #9, 10 years, 11 months ago

Hi,

I also have the page set to cachable and Ditto as uncached.

My full code:

<div id="homeCarousel" class="home_carousel_list">
                    <div class="single_slide">
                        [!Ditto? &parents=`14` &display=`1` &randomize=`1`
                        &tpl=`LAYOUT` !]
                    </div>
                <div class="single_slide">
                        [!Ditto? &parents=`14` &display=`1` &randomize=`1`
                        &tpl=`LAYOUT` !]
                    </div>
                <div class="single_slide">
                        [!Ditto? &parents=`14` &display=`1` &randomize=`1`
                        &tpl=`LAYOUT` !]
                    </div>
                <div class="single_slide">
                        [!Ditto? &parents=`14` &display=`1` &randomize=`1`
                        &tpl=`LAYOUT` !]
                    </div>
                <div class="single_slide">
                        [!Ditto? &parents=`14` &display=`1` &randomize=`1`
                        &tpl=`LAYOUT` !]
                    </div>
                <div class="single_slide">
                        [!Ditto? &parents=`14` &display=`1` &randomize=`1`
                        &tpl=`LAYOUT` !]
                    </div>

tpl_chunk:

<div class="well carousel">
        <div class="image">
            <a href="[~[+id+]~]"><img alt="[*longtitle*]" src=
            "[+tv_image+]"></a>
        </div>
 
        <div class="title">
            <a href="[~[+id+]~]">[+pagetitle+]</a>
        </div>
    </div>

So I have four rounds of 3 slides each and each slide should always show a unique and different child resource. What happens now is that always one and the same child resource shows in all 3 slides and also when scrolling to the next round of 3 slides. Only upon refresh do I get a new child resource. I really thought that &display and &randomize should do the trick and my code is not different than yours... am surprised why it doesnt work, must be something really small I am missing here... sad

Anyways, I will do some more testing and create a whole new resource parent, make a new setup, tidy up code, maybe re-write, and lets see...

Thank you for your help and posting your code.

953 Posts

iusemodx Reply #10, 10 years, 11 months ago

a problem may well be that you are calling exactly the same multiple times

have you tried giving each call a unique Ditto ID - that may help

Although I still think how you have it setup is OTT - you only need one Ditto call

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

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