Assign a CSS class to the first item in a loop

It is possible that you might face a situation where you are using a {foreach...} loop to render a list of items, but you may want to assign a CSS class to the first item in the loop. An easy way to accomplish this is by looking at the property @first of the current iteration item.

1
2
3
4
5
6
7
8

{pages child_of="houses" assign_to="houses_pages"}
 
{foreach $houses_pages.data as $house}
<div class="{if $house@first == 1}active{/if}">
    <h4>{$house.post_title}</h4>
    {$house.post_content_filtered}
</div>
{/foreach}

{pages child_of="houses" assign_to="houses_pages"}

{foreach $houses_pages.data as $house}
<div class="{if $house@first == 1}active{/if}">
    <h4>{$house.post_title}</h4>
    {$house.post_content_filtered}
</div>
{/foreach}

By: Raul Sanchez
Category: Frameworks
Posted on: Saturday, May 9, 2015