Textpattern tips, tutorials and code snippets

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 Comment feed

Excellent posts, thank’s.

Thanks, a lot. This tip was excellent!

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. :)

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

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

Use Textile help to style your comments