Fun with Zebras (and Textpattern 4.0.7)

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 flickrish style, and now there’s zebras:

Geschrieben am 1. Juli 2008. Mehr davon unter .

Ähnliche Beiträge

Comments

Bloke am 2. Juli 2008, 08:48:   #

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

Ruth am 9. Juli 2008, 11:50:   #

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

Chris am 20. Juli 2008, 09:22:   #

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.