Question

In Movable Type, entries or comments or other objects are often shown in lists. For example, the main index shows the most recent entries, a category archive also shows entries, or an individual entry archive shows comments. I preferred if not all items in such lists were styled the same. For example, there should be an alternating white / gray background. How can this be done?

Answer

Fortunately, the answer can be given in a generic way. The technique that I am going to show can be used with all types of objects (entries, comments, categories, etc.) and any number of different styles.

For showing the basic idea I will create a list of entries using 3 different styles. These styles should be as follows.

Plain List

We will start with the basic list for creating the entries.

And inside the CSS there might be the following definition.

This will create a list of the 10 most recently published entries. Each of them is output on a grey background with identical formatting.

Alternating List

Writing the CSS for the alternating list is easy. We simply use three different div's with the style for the tags (h1 and p) defined with respect to this div.

This reads: there is a class »entry1« for a »div« with its background color set to »red«. All »h1« tags inside a »div« of class »entry1« will be 30px. All »p« tags inside a »div« of class »entry1« will be 16px.

Now we have to change the basic loop from above. We obviously have to "remember" the previous formatting and set the current formatting appropriately. In Movable Type, remembering some state can be done with variables. Conditionally doing one or the other can be done with the Compare Plugin.

If you do not know the Compare Plugin, please read Comparison needed for conditional Generation. The Compare Plugin is a general-purpose plugin. It should be installed with each Movable Type installation.

The code for alternating the entries' styles is as follows.

A variable »mgs_style« is initialized with the value "0". Then the loop for the most recently published entries is started. Before any entry is printed, the correct style is calculated. Basically the calculation should be something like...

• if it has been 1, then it will be 2
• if it has been 2, then it will be 3
• if it has been 3, then it will be 1

However, if we coded the calculation as in the unordered list above, it would not work. Each of the three "if-statements" would be executed in sequence. So with starting the MTEntries-loop the value would be 1, then 2, then 3, and then 1. That is the reason, why I coded the "if-statements" in descending order. Moreover, the bouncing to the top (from "3" to "1") is a special case that has to be taken care of. I use the value "0" for that.

Each of the "if-statements" compares the variable against one of the possible values. If you do not yet have some experience with the Compare Plugin, the left side of the comparison looks a little bit strange. Please read Build Conditions with the Compare Plugin for additional information.

The resulting output will then be...

Why don't you use the MTElse?

I do know that the MTIfEqual can also be used with an MTElse branch. If I had used the MTElse the reverse sorting of the "if-statments" and the value "0" would not have been necessary. However, using the MTElse would have resulted in code, which is rather difficult to read. I wanted to avoid that for this tutorial.

Special Plugins

I do know that there are special plugins for solving the task. However, most of the time I prefer using only general-purpose plugins and avoid many small plugins each for a specific task. Updates will be easier, if my weblog does not depend on too many plugins.

For example, the FlipFlop Plugin can be used for that.

mgs

Feedback is welcome!

What do you think about this entry? Was it interesting or boring? I would like to hear your comments. If the text was helpful, please consider setting a link to http://www.movable-type-weblog.com/.

No spam please!

For protecting this weblog I have installed the MT-Approval Plugin. You have to view a new comment in preview mode, before it is saved on the server. Moreover, I will view your comment manually, before it is published. You can find more information on the subject in the entry Weblog Spamming Basics.

With an active TypeKey session, your comment will be published immediately.

TypeKey has temporarily been disabled at this location. Please create your comment without using TypeKey or log in from the preview dialog.

Yanno this does make life much harder, one could just install FlipFlop or Roundrobin which is a simple pl file!

I do know the FlipFlop Plugin and also mention it at the end of the article. However, coding the conditional generation myself will result in greater flexibility. Moreover, my weblog does not depend on too many plugins.

I forgot to mention that it is a good way to show what can be done with the Movable Type Tag Language.