ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

double loop with div-elements

December 13, 2011 4:02pm

Subscribe [3]
  • #1 / Dec 13, 2011 4:02pm

    hartstikkid

    4 posts

    On my product-overview-page I want to display all my categories + a category-image.
    For each row I can display three items / then a need a new row/box > so I need a loop in a loop ...
    Who can give me a hint ???

    My code :

    {exp:channel:categories channel="producten" style="linear"}
    
    <div class="product_list_block clearfix"><!-- start of the row / how to loop this one each 3 times ???????-->
         <div class="box three first|box three second|box three last"><!-- loop left|middle|right box-->  
              <div class="product_image">{category_image}</div>
              <h5>{category_description}</h5>
    <p>          Donec elementum ullper purus</p>
    
    <p><br />
         </div><br />
    </div><!-- end of the row--></p>
    
    <p>{/exp:channel:categories}

    THX !!!

  • #2 / Dec 13, 2011 6:47pm

    Rob Allen

    3114 posts

    Instead of double lopping why not use CSS to clear the 3rd/6th/9th DIV elements.

    You can use the switch= variable to apply different classes…

    {exp:channel:categories channel="producten" style="linear"}
         <div class="{switch='first|second|third'}"><!-- loop left|middle|right box-->  
              <div class="product_image">{category_image}</div>
              <h5>{category_description}</h5>
    <p>          Donec elementum ullper purus<br />
         </div><br />
    {/exp:channel:categories}

    Then apply some CSS to always clear the first DIV element in any row…

    .first { clear: left; }
  • #3 / Dec 14, 2011 4:01pm

    Kevin Smith

    4784 posts

    Thanks for the excellent tip, Rob.

    hartstikkid, that’s a much better way of handling things. Does that tip get you pushed in the right direction?

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases