Vary the formatting for the first page of an article list

On your article list pages, you may want to format the first page of articles a little differently than “previous” pages (usually, pages with older articles). For example, you may want to give special formatting to the very first (most recent) article in a list, as on this page of cruise reviews, and then give articles on previous pages a more “archival” format.

You can accomplish this with the help of <txp:variable /> and <txp:page_url />. Textpattern’s <txp:page_url /> tag can retrieve a number of url variables, and using the type="pg" we can tell what page of an article list we are on.

The code

<txp:variable name="page_num" value='<txp:page_url type="pg" />' />
<txp:if_variable name="page_num" value="">
           <txp:article limit="12" />
<txp:else />
           <h2>Older Articles</h2>
           <txp:article form="archive" />
</txp:if_variable>

First, we record, in a Textpattern variable called “page_num”, what page number we are on. In this case, all we really need to know is if we’re on the first page, in which case <txp:page_url type="pg" /> will return empty, or some other page, in which case it will return some number.

We use the conditional <txp:if_variable> to check if our page_num variable is empty, and if so output our normal article list (using the default form). If it is not empty, meaning we are on a page of articles other than the first page, we output a list using the archive form.

Default form (called for the first page)

<txp:if_first_article>
      <div class="first excerpt">
      <h2>Latest Review</h2>
      <h3><txp:permlink><txp:title /></txp:permlink></h3>
      <txp:excerpt />
      <txp:upm_article_image form="image_center_full" />
      </div>
      <h2>Other Recent Reviews</h2>
<txp:else />
      <div class="excerpt">
      <h3><txp:permlink><txp:title /></txp:permlink></h3>
      <txp:excerpt />
      </div>
</txp:if_first_article>

The preceding code gives the very first article a special class and displays an image.

Archive form (called for the other pages)

<div class="excerpt">
<h3><txp:permlink><txp:title /></txp:permlink></h3>
<txp:excerpt />
<div class="artMeta">
<div class="posted"><span>Posted:</span> <txp:posted format="%d.%m.%Y" /></div>
<div class="tagsFromArt"><span>Tags:</span> <txp:tru_tags_from_article wraptag="" break="" /></div>
</div>
</div>

5 Comments - Comments RSS Feed

Gard
# 1 October 2009

Excellent posts, thank’s.

Andreas
# 8 October 2009

Thanks, a lot. This tip was excellent!

Giuseppe Caruso
# 8 November 2009

Hi, great post.
When I am in difficulties with a new website I always come here and ALWAYS find the answer I was looking for. Thanks.

Can I suggest a tip? Could you add a list of the plugins used in the post? E.g. in this post I see True Tags one but I am not able to identify other ones. It could be really useful. :)

Jonathan Stubbs
# 9 November 2009

Guiseppe, thanks for the positive comment! We do normally mention any plugins used for a tip, but I guess this one fell through the cracks…

Nora in her archive form has a <txp:tru_tags_from_article tag, which is from the tru_tags plugin

Nora Brown
# 16 January 2010

A little update: let’s say you want to output only 4 articles on the first page, but 10 on the “older” page. In that case, you must use a negative offset like so:

<txp:variable name="page_num" value='<txp:page_url type="pg" />' />
<txp:if_variable name="page_num" value="">
  <txp:article limit="4" />
<txp:else />
  <txp:article form="archive" offset="-6" />
</txp:if_variable>

Thanks to Gocom for the help!

Add a comment

Required

Required, not displayed

Optional

Use Textile Help to style your comments