Treating Every n'th out of x Entries as Special in Movable Type

| 1 Comment | No TrackBacks |
I recently had to deal with a list of entries of arbitrary length, and every second out of three had to be displayed slightly differently than the one before and after it.  The idea was to create sort of a three-column effect, with each 'middle' entry sporting a left and right border.  A very useful tool for this is Movable Type's built-in modulo operation.
To begin with, here is the template code I used (simplified a bit for this article):

<div style="width:680px">
<mt:entries lastn="20">
<mt:var name="__counter__" op="%" value="3" setvar="modulo">
<div style="float:left;width:200px;height:70px;padding:10px
<mt:if name="modulo" eq="2">;border-left:1px solid black;border-right:1px solid black</mt:if>

As you can see, this loops over the twenty most recent entries, displaying the title of each entry inside a pair of left-floating <div> tags with a fixed width and height, and all of this is enclosed in another <div> block with a fixed width.  Without any Movable Type template magic, this would result in a grid-like listing of the twenty most recent headlines.

The 'special sauce' is in the third and fifth lines.  On the third line, we take the value of the built-in __counter__ variable, which holds our current position in the <mt:entries> loop.  We apply the "%" (modulo) function to it, with a value of "3".  Modulo, for those of you who forgot this from maths class, is used to calculate the remainder if you divide by the second number and aren't using fractions or decimals.  Basically, modulo x of a number results in zero if the number can be divided by x, and in a number greater or equal than 1 and smaller than the number otherwise.

In this concrete example, the value of the modulo variable goes through this cycle as we go through the <mt:entries> loop: 1, 2, 0, 1, 2, 0, 1, 2, 0...

As you can see, each time modulo = 2, we are in the 'middle' of a set of three.  So on line 5 we check for this condition and if true, we add some extra styling to add the borders.  And that is basically it.  The resulting output looks like this:

10 Tips for Securing Your Movable Type Installation
Six Apart Japan and Evernote Announce Deal (I think)
Melody Database Backup Plugin
How to Show a List of all Possible Values in a Custom Field in Movable Type Hacked, or Why It Is Important to Keep Movable Type Updated
Displaying the Latest from the Blogs that Most Recently Published an Entry with Movable Type
Displaying the Date and Time of the Latest Activity on a Movable Type Blog
Movable Type and Melody Community Aggregator (re-)Launched!
Movable Type 5.1 is Released!
Movable Type 5.1 Release Candidate 4 is out
Movable Type 5.1 RC3 Released
Stopping Movable Type Comment Spam with Comment Challenge
Resurrecting the Movable Type Community News Aggregator
Movable Type 5.1 Release Candidate 2 is out
Using the Movable Type 'Memo' Plugin to Add (Anything?) to the Create Entry Screen
Movable Type 5.1 Release Candidate 1 is out
Melody 1.0 is (Finally) Out!
Comparing Movable Type and TypePad Template Tags
Movable Type, Timezones and Daylight Saving Time
Movable Type 5.1 beta 3 is out
You could use this technique for many other purposes: changing background colour after every x items in a list, start a new column after x items, highlight every x'th item in a list... 

No TrackBacks

TrackBack URL:

1 Comment

Hello there, just became alert to your blog through Google,
and found that it is truly informative. I am going to watch out for brussels.
I'll appreciate if you continue this in future. Many people will be
benefited from your writing. Cheers!

Leave a comment