Code / Appnel Solutions 

Alternating Values in MT Templates

When presenting a running list of items like comments or posts in an archive, designers will provide visuals cues to indicate where one item ends and the next begins. One of those methods that is commonly used is the subtle alternating background colors. Here is a screenshot of the technique in use:

MT doesn't have a straight forward means of alternating or determining if the count is an odd or even number. The Gizmos for MT collection has a variable tag that makes that easy:

<$mt:alternator$>

Each time that template engine passes over the mt:alternator tag it outputs either "odd" or "even" by default. Using these labels as CSS class names we can alternate the style of each item:

.odd  { background-color: white;  }
.even { background-color: silver; }

We then apply the mt:alternator tag to the markup:

<mt:comments>
   <div class="<$mt:alternator$>">
     ...
   </div>
</mt:comments>

This will produce HTML something like:

   <div class="odd">
     ...
   </div>
   <div class="even">
     ...
   </div>
   <div class="odd">
     ...
   </div>

...and so on.

Perhaps "odd" and "even" are too drab for you or you're more of a inline styles designer. We pass no judgement. Use the odd and even attributes to set different values or the tag to alterate between:

<mt:comments>
   <div style="background-color: <$mt:alternator odd="white"   even="silver"$>;">
     ...
   </div>
</mt:comments>

Instead of "odd" and "even" the tag alternates between "white" and "silver."

The mt:alternator tag can track multiple alternators in one page by using the optional name attribute. For instance, you want to list comments and pings on one entry page and use the alternator effect.

<mt:comments>
   <div class="comment-<$mt:alternator name="comments"$>">
     ...
   </div>
</mt:comments>

<mt:pings>
   <div class="ping-<$mt:alternator name="pings"$>">
     ...
   </div>
</mt:pings>

Regardless of whether the list of comments ended with an "odd" or "even" value, the pings list will always begin with "odd."

For more details on this tag and more see the Gizmos for MT documentation in the knowledge base.

Not to sell Gizmos short, but you don't actually need it for this - all containers in MT4 have $odd and $even set automatically, so you can test using something like this:

<mt:if name="__odd__">odd<mt:else>even</mt:if>

And then set your stylesheet accordingly, as you have described above.

Also, your formatting is slightly hosed. Sorry. :)

Thanks for noting that. You are correct. I forgot that MT4 subsumed the odd and even variables feature in replacing HTML::Template.

I don't think you are selling Gizmos short though. For the most part, Gizmos doesn't do anything you can't already with some extra effort and perhaps creative use of tags and modifiers. The value I was looking to create with Gizmos was making common tasks easier, faster and more straight-forward. mt:alternator is a good example of this objective in practice. While this tag was created before MT4, it still enabled a function in one variable tag that would require mt:if and mt:else container tags to do.

Another slight difference is that the mt:alternator has a page scope that goes beyond the loop in context -- not sure how useful that is though.