We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 14868
    • 17 Posts
    I’ve been working with the 960.gs grid and was having a problem with needing to list several grid items but needing to style the first and last items in a row.

    after a few searches i didn’t see anything so I wrote this little snippet and wanted to get feedback. after an initial test it seems to be working fine but thought i’d submit it to the community in the event that it might help others or i’d get some feedback on a better approach.

    in the grid system (this would really work on anything that you are needing to style the first and last items in a row) i needed to put the class "alpha" or "omega" according for it to clear out the respective left and right margins.


    here’s the snippet (i haven’t changed the code to test if the appropriate vars are not properly set)
    <?php
    //n represents the number of items per row
    $n= isset($n) ? $n: "not set";
    
    //current represents the current document
    //ditto_iteration starts at 0 so we add 1
    $current = isset($current) ? $current + 1 : "not set";
    
    //the code below will always evaluate to 1 for the first item and 0 for the last item in the row
    switch($current % $n){
      case 1:
            return "alpha";
            break;
     case 0:
           return "omega";
    break;
    }
    ?>
    


    from my ditto call i use the following in my chunk(in this example i have 3 grid_4 items in a row but "n" could be adjusted to however many items you are listing in a row:
    <div class="grid_4 promoBox [!nthItem? &n=`3` &current=`[+ditto_iteration+]`!]"
    <a href=""><img src="[+thumbnail+]" alt="[+pagetitle+]"/></a>
    <h3>[+pagetitle+]</h3>
    </div>
    


    hope this helps or perhaps someone has found a cleaner way.
      • 3749
      • 24,544 Posts
      FWIW, in MODx Revolution, the getResources snippet will do this quite cleanly.
        Did I help you? Buy me a beer
        Get my Book: MODX:The Official Guide
        MODX info for everyone: http://bobsguides.com/modx.html
        My MODX Extras
        Bob's Guides is now hosted at A2 MODX Hosting
        • 14868
        • 17 Posts
        Hey Bob,

        Starting to migrate into Revolution and I’m running into the same issue. You mentioned getResources has an easy solution. I can see that I can do a tpl_n.

        If I have 4 items in a row and need the 1st item and the 4th item to have a class of "alpha" for first item and "omega" for last item how do I set that up? I’m not defining how many rows are on a page.

        Appreciate any help you can offer.
          • 14868
          • 17 Posts
          nevermind...I figured it out. was able to create 3 chunks. _item, _item_alpha, _item_omega.

          [[!getResources? &tpl=`_item` &tplFirst=`_item_alpha` &tpl_5=`_item_alpha` &tpl_4=`_item_omega`&parents=`[[*id]]`]]

          That was the quick fix...only thing I don’t like about it is I effectively have 3 chunks with the same content but each with a different class call. Not sure if there is a cleaner way to do it.

          <div class="_item">
          content
          </div>

          <div class="_item alpha">
          content
          </div>

          <div class="_item omega">
          content
          </div>

          Is there any way to inject a class call on the nth item?