Display navigation if newer or older values exist

Textpattern offers an in-built method for paging result sets – page 1, page 2 and so on – via the txp:newer and txp:older tags.

A colleague was working on a site where he wanted the <div id="navigation"> to display only if there was a value for either <txp:older /> or <txp:newer />.

The first revision

This is the first code revision:

<txp:if_article_list>
<!-- entry navigation -->
<div id="navigation">
<txp:variable name="older" value='<txp:older />' />
<txp:variable name="newer" value='<txp:newer />' />
<txp:if_variable name="newer" value="">
<txp:else />
<div class="nav-links"><txp:newer>Next</txp:newer> &#8594;</div>
</txp:if_variable>
<txp:if_variable name="older" value="">
<txp:else />
<div class="nav-links">&#8592; <txp:older>Previous</txp:older></div>
</txp:if_variable>
<!-- entry entry navigation -->
</div>
</txp:if_article_list>  

Nice, but it does not work because #navigation is placed outside of the variable call. What we need to do is to place <txp:newer /> and <txp:older /> inside the variable.

The final code

<txp:if_article_list>
<txp:variable name="has_np" value='<txp:older /><txp:newer />' />

<txp:if_variable name="has_np" value="">
<txp:else />
<!-- entry navigation -->
<div id="navigation">
</txp:if_variable>

<txp:older>
<div class="nav-links">&#8594;
<a href="<txp:older />"><txp:text item="prev" /></a></div>
</txp:older>

<txp:newer>
<div class="nav-links"><a href="<txp:newer />"><txp:text item="next" /></a>
&#8594;</div>
</txp:newer>

<txp:if_variable name="has_np" value="">
<txp:else />
<!-- end entry navigation -->
</div>
</txp:if_variable>
</txp:if_article_list>

As you can see, we first check if either newer or older values exist and if so, place them in a variable: <txp:variable name="has_np" value='<txp:older /><txp:newer />' />. If the variable exists, <div id="navigation"> is displayed.

comments powered by Disqus