We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 16360
    • 15 Posts
    Hi there!

    I have a preety simple question but dont know how to do it. I have a ditto call which displays all items from parent but I wanted that each second item will have different background to make results more clear to read.

    lets say first, third, fifth item will use template with class "item_white", and second, fourth, sixth wil be "item_gray"

    I would like to know is there a way to do that with ditto or some parameter ?

    Thx for reply [ed. note: krizz last edited this post 13 years, 2 months ago.]
      • 3647
      • 177 Posts
      There is a setting &tplAlt to use a different template alternatly
      http://wiki.modxcms.com/index.php/Ditto_2.1_parameters

      That should do the trick
        • 13226
        • 953 Posts
        Quote from: krizz at Aug 20, 2013, 07:59 AM
        I have a preety simple question

        Ah, a simple question, that has multiple solutions:

        Solution 1:

        I havent tested this solution, but I see no reason why it shouldn't work, as the template parameters are for this type of modification.

        Add the following to your Ditto call:
        &tpl=`ditto_odd` &tplAlt=`ditto_even`

        Create two new chunks:

        ditto_odd:
        <li class="ditto_odd"><a href="[~[+id+]~]">[+menutitle+]</a></li>

        ditto_even:
        <li class="ditto_even"><a href="[~[+id+]~]">[+menutitle+]</a></li>

        Add the following to your CSS file:
        .ditto_odd{color:inherit; background-color:red;}
        .ditto_even{color:inherit; background-color:blue;}


        Solution 2:

        For this solution you need PHX installed

        Add the following to your Ditto call:
        &tpl=`evenodd`

        Create a new chunk:

        evenodd:
        <li class="[+ditto_iteration:evenodd+]"><a href="[~[+id+]~]">[+menutitle+]</a></li>

        Create a new snippet, call it: phx:evenodd
        Paste this content into the snippet code area and save:

        <?php
        if ($output % 2) {
        return 'ditto_even';
        } else {
        return 'ditto_odd';
        }
        ?>

        Add the following to your CSS file:
        .ditto_odd{color:inherit; background-color:red;}
        .ditto_even{color:inherit; background-color:blue;}


        Solution 3:

        Simply use CSS - only works in modern browsers.

        Add the following to your CSS file:
        li:nth-child(odd){color:inherit; background-color:red;}
        li:nth-child(even){color:inherit; background-color:blue;}

        You will need to specify a parent "ID" or "class" e.g.
        #dittowrapper ul li:nth-child(odd){color:inherit; background-color:red;}
        #dittowrapper ul li:nth-child(even){color:inherit; background-color:blue;}


        Cheers


        UPDATE

        Just to ensure that there is no misunderstanding.

        Ditto uses a default template which is specified in the language file of the language that is in use.

        The default template used in the english.inc.php (assets/snippets/ditto/lang/) is:

        <div class="ditto_item" id="ditto_item_[+id+]">
          <h3 class="ditto_pageTitle"><a href="[~[+id+]~]">[+pagetitle+]</a></h3>
          <div class="ditto_documentInfo">by <strong>[+author+]</strong> on [+date+]</div>
          <div class="ditto_introText">[+introtext+]</div>
        </div>


        If you are using the default template at the moment, you will need to adjust it as such e.g.

        For "Solution 1" the template chunks would be:

        ditto_odd:
        <div class="ditto_item ditto_odd" id="ditto_item_[+id+]">
          <h3 class="ditto_pageTitle"><a href="[~[+id+]~]">[+pagetitle+]</a></h3>
          <div class="ditto_documentInfo">by <strong>[+author+]</strong> on [+date+]</div>
          <div class="ditto_introText">[+introtext+]</div>
        </div>

        ditto_even:
        <div class="ditto_item ditto_even" id="ditto_item_[+id+]">
          <h3 class="ditto_pageTitle"><a href="[~[+id+]~]">[+pagetitle+]</a></h3>
          <div class="ditto_documentInfo">by <strong>[+author+]</strong> on [+date+]</div>
          <div class="ditto_introText">[+introtext+]</div>
        </div>
        [ed. note: iusemodx last edited this post 13 years, 2 months ago.]
          • 16360
          • 15 Posts
          Thank you for your reply, its working laugh
            • 9995
            • 1,613 Posts
            Is there also a way to use different TPLs for the first 7 items and after that repeat them again? Yea I know it sounds crazy..

            // I have a static setup page where you can see a image in different sizes and title, when a new image/page is added the images will get a different size. Clicking on them will get you to the detailpage. I'm using some isotope script at the moment but still am interested if this is possible.

            --

            just found some old topic which might do the job
            https://forums.modx.com/thread/?thread=29779.&i=1&page=2
              Evolution user, I like the back-end speed and simplicity smiley