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.

  3. This is good news, as we are planning to enhance out current product gallery on Treppenlift.at, and these new features will help us to reduce the amount of glue PHP a little bit more. Which is always a good thing, as it’s more efficient to shift tasks to the designer and reduce all conventional programming to the minimum.