This example shows how to iterate through a collection of items, and distribute them amongst rows that contain a fixed number of items. E.g. distributing 2 items per row.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | {$count = 0} {foreach $posts.data as $post} {$count = $count + 1} {if $count%2 == 1} {* use $count%n to add more items per row *} <!-- post Row --> <div class="row post_row"> {/if} <!-- post --> <div class="col-sm-4"> <div class="post"> <div class="img"> <a href="{$post.post_permalink}"> <img src="{$post.post_thumbnail}" alt="{$post.post_title} - {$company.name}" class="img-responsive" /> </a> </div> <div class="text"> <h5><a href="{$post.post_permalink}">{$post.post_title} {$count}</a></h5> <span class="date">Wed, 12 Dec.</span> {$post.post_excerpt} </div> <div class="author_box"> <h6>Alejandra Galvan</h6> <p>Creative Director</p> </div> <!-- <a class="plus_wrapper" href="blogpost.html"> <span>+</span> </a> --> </div> </div><!-- /post --> {if $count%3 == 0 || $post@last == 1} </div><!-- /post row--> {/if} {/foreach} |
{$count = 0} {foreach $posts.data as $post} {$count = $count + 1} {if $count%2 == 1} {* use $count%n to add more items per row *} <!-- post Row --> <div class="row post_row"> {/if} <!-- post --> <div class="col-sm-4"> <div class="post"> <div class="img"> <a href="{$post.post_permalink}"> <img src="{$post.post_thumbnail}" alt="{$post.post_title} - {$company.name}" class="img-responsive" /> </a> </div> <div class="text"> <h5><a href="{$post.post_permalink}">{$post.post_title} {$count}</a></h5> <span class="date">Wed, 12 Dec.</span> {$post.post_excerpt} </div> <div class="author_box"> <h6>Alejandra Galvan</h6> <p>Creative Director</p> </div> <!-- <a class="plus_wrapper" href="blogpost.html"> <span>+</span> </a> --> </div> </div><!-- /post --> {if $count%3 == 0 || $post@last == 1} </div><!-- /post row--> {/if} {/foreach}
You can also add 1
to the index as you are iterating and calculate the module of the number of items that you would like to have in a single row.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | {foreach $posts.data as $post} {meta post_id="{$post.ID}" assign_to="meta"} {if ($post@index+1)%3 == 1} <!-- post Row --> <div class="row post_row"> {/if} <!-- post --> <div class="col-sm-4"> <div class="post"> <div class="img"> <a href="{$post.post_permalink}"> <img src="{$post.post_thumbnail}" alt="{$post.post_title} - {$company.name}" class="img-responsive" /> </a> </div> <div class="text"> <h5><a href="{$post.post_permalink}">{$post.post_title}</a></h5> <span class="date">Wed, 12 Dec.</span> {$post.post_excerpt} </div> <div class="author_box"> <h6>Alejandra Galvan</h6> <p>Creative Director</p> </div> </div> </div><!-- /post --> {if ($post@index+1)%3 == 0 || $post@last == 1} </div><!-- /post row--> {/if} {/foreach} |
{foreach $posts.data as $post} {meta post_id="{$post.ID}" assign_to="meta"} {if ($post@index+1)%3 == 1} <!-- post Row --> <div class="row post_row"> {/if} <!-- post --> <div class="col-sm-4"> <div class="post"> <div class="img"> <a href="{$post.post_permalink}"> <img src="{$post.post_thumbnail}" alt="{$post.post_title} - {$company.name}" class="img-responsive" /> </a> </div> <div class="text"> <h5><a href="{$post.post_permalink}">{$post.post_title}</a></h5> <span class="date">Wed, 12 Dec.</span> {$post.post_excerpt} </div> <div class="author_box"> <h6>Alejandra Galvan</h6> <p>Creative Director</p> </div> </div> </div><!-- /post --> {if ($post@index+1)%3 == 0 || $post@last == 1} </div><!-- /post row--> {/if} {/foreach}
Create, customize, and publish mobile web applications using the Appcropolis Mobile Builder.
Get StartedWe offer 1,000's of mobile templates that are fully designed, coded, and ready to use. Learn more.
Download Free Templates
Not registered? Create an Account.
Lost your password? Click here to recover.