Author: gaurav

Distributing 2 items per row

Posted on by gaurav

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>&#43;</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>&#43;</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}