Tip: How to Offer “View All” Pagination Option

I worked on a project recently where I needed to offer a view all option in addition to the usual pagination links. Is that possible with ExpressionEngine? Of course! And since it provides a great example of what’s possible with embedded templates, I thought it’d be fun to show it off here.

Let’s say you’re building a site that will have a section with 20 to 30 inspirational quotations, and you want visitors to view the quotations one at a time. The Channel Entries tag to make this happen might look like this:

{exp:channel:entries
    channel
="quotations"
    
limit="1"
    
paginate="bottom"
}
    
<article>
        <
div class="quote">
            
{quote}
        
</div>
        <
div class="author">
            
{quote_author}
        
</div>
    </
article>
    
{paginate}
        
<div id="pagination">
            
{if next_page}
                
<a href="{auto_path}">Next Quotation</a>
            
{/if}
            {if previous_page}
                
<a href="{auto_path}">Previous Quotation</a>
            
{/if}
        
</div>
    
{/paginate}
{
/exp:channel:entries} 

Awesome. But what if you wanted to give visitors the option to view all these quotations on the page at once? You could just set up a separate template for this entirely, but that’ll mean a lot of very similar code in two places. That’s not very DRY. Here’s where embedded templates come in handy.

For this example, imagine we have a template group named quotations with two templates in the group: index and _entry.1

Let’s look at the full templates first, then we’ll go through what’s happening in each one. The quotations/index template will serve as our main template, the one accessed by pulling up http://example.com/quotations in a browser:

{if segment_2 == 'all'}
    {embed
='quotations/_entry' limit='30' paginate=''}
{if
:else}
    {embed
='quotations/_entry' limit='1' paginate='bottom'}
{
/if} 

And quotations/_entry, the embedded template:

{exp:channel:entries
    channel
="quotations"
    
limit="{embed:limit}"
    
paginate="{embed:paginate}"
}
    
<article>
        <
div class="quotation">
            
{quotation}
        
</div>
        <
div class="author">
            
{quote_author}
        
</div>
    </
article>
    
{paginate}
        
<div id="pagination">
            
{if next_page}
                
<a href="{auto_path}">Next Quotation</a>
            
{/if}
            {if previous_page}
                
<a href="{auto_path}">Previous Quotation</a>
            
{/if}
            
<a href="{path='quotations'}/all">View All</a>
        </
div>
    
{/paginate}
{
/exp:channel:entries} 

As you can see, quotations/index is a fairly straightforward template. According to the conditional, if http://example.com/quotations/all is pulled up in a browser, the embedded template will be loaded by the first embed tag in the template. If the second URL segment is anything other than "all", the second embed tag will load the embedded template.

The important differences between the two embed tags are the values of the embed variables. Values entered as parameters in the embed tag, such as limit='30', replace embed variables, like {embed:limit}, when the embedded template is processed. By loading the first embed tag, we’ll see as many as 30 quotations on a single page without any pagination links.2 If the second embed tag is loaded instead, we’ll see a single quotation per page with links to see the next and previous quotations (if applicable). The paginated view will also include a link to view all the quotations at once thanks to this bit of template code nestled within the paginate variable pair:

<a href="{path='quotations'}/all">View All</a

This is powerful stuff. You can reuse similar blocks of template code and dramatically change the behavior of ExpressionEngine’s tags with smart combinations of embedded templates and embed variables. Next time you’re considering copying existing template code and pasting it elsewhere with a few tweaks, ask yourself if embedded templates could help keep your template code nice and tidy.

1 That underscore prepending the template name means it’s a hidden template. We recommend changing ExpressionEngine’s hidden template indicator from the default dot to an underscore since many desktop operating systems also hide files when the filename begins with a dot, which could lead to confusion if you’re saving templates as text files.

2 For performance reasons, be mindful of the number of entries that a view all option could spit out on a single page of your client’s site. The default limit on a Channel Entries tag is 100, but you could specify any limit you want. Several thousand big entries on a single page? Yikes.

.(JavaScript must be enabled to view this email address) or share your feedback on this entry with @ellislab on Twitter.