Fun with Zebras (and Textpattern 4.0.7)

2. Juli 2008

Textpattern 4.0.7, yet to be released, improves in the details. So much in fact, that a modest wave of example code snippets might help to grok some of the newly opened possibilities.

So here’s my take on an evergreen: Zebra-striped lists (you know – the old thing of odd lines in a list having a bright background, while even lines are dark). I, for instance, have a fine collection of vaguely animal-themed links on this site, and it just occurred to me that I hadn’t yet published this list.

A quite simple task without any further ado:

<txp:linklist category="beastly" wraptag="ul" break="li" />

Which gives us that:

Simple – but no zebra stripes. Colouring every other list item requires us to assign a CSS class to at least one half of all list items to distinguish them from the rest. Enter <txp:variable />.

I introduce a variable deliberately named “zebra” which holds the class name for the current list item while <txp:linklist /> cycles over all links from my chosen category. <txp:if_variable>, a conditional tag which will also debut in Textpattern 4.0.7, tests the variable’s current value and then changes it into the opposite:

<txp:if_variable name="zebra" value="odd">
  <txp:variable name="zebra" value="even" />
<txp:else />
  <txp:variable name="zebra" value="odd" />
</txp:if_variable>

Do you hear that flip-flop sound?

Using the result of this effort as a class name, I output the current link’s LI element. For the sake of this tiny tutorial, the whole markup is introduced as contained content of <txp:linklist /> (I could have built it into a separate link form as well, but didn’t bother):

<txp:linklist category="beastly" wraptag="ul" break="">

<txp:if_variable name="zebra" value="odd">
  <txp:variable name="zebra" value="even" />
<txp:else />
  <txp:variable name="zebra" value="odd" />
</txp:if_variable>

<li class="<txp:variable name="zebra" />"><txp:link  /></li>

</txp:linklist>

Add a little bit of style, and now there’s zebras:

Kommentare

  1. Nice example of the power of <txp:variable />. Thanks!

  2. Very nice example. Thank you.
    Textpattern is easy to use, i like it.