January 2009 Archives

Publish Entries in Two Columns

| No Comments

Was working on a project for a major television network who needed to place the output of the <mt:Entries> loop into two columns. Because they wanted to have the most recent entries at the top of the columns I suggested the following.

Start by appending each entry into either the left or right column based upon the odd and even template loop meta variables:

<mt:Entries>
    <mt:If name="__odd__">
        <mt:SetVarBlock name="odd_column" append="1">
            <$mt:Include module="Entry Summary"$>
        </mt:SetVarBlock>
    </mt:If>
    <mt:If name="__even__">
        <mt:SetVarBlock name="even_column" append="1">
            <$mt:Include module="Entry Summary"$>
        </mt:SetVarBlock>
    </mt:If>
</mt:Entries>

Then output the two variables into your columns:

<div id="odd-column">
    <$mt:Var name="odd_column"$>
</div>
<div id="even-column">
    <$mt:Var name="even_column"$>
</div>

I love simple elegant solutions.

Other Object Loops in Two Columns

This solution also works for other loops such as categories, comments, pages, assets, trackbacks, tags, users.

Here’s an example to list categories in two columns (plus the last three entries for each category).

Use SetVarTemplate to define mtml structure which is rendered where the template is used later:

<mt:SetVarTemplate name="category_summary">
    <div>
        <h3><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></h3>
        <ul>
        <mt:Entries lastn="3">
            <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
        </mt:Entries>
        </ul>
    </div>
</mt:SetVarTemplate>

Separate the category output into two variables;

<mt:Categories>
    <mt:If name="__odd__">
        <mt:SetVarBlock name="odd_column" append="1">
            <$mt:var name="category_summary"$>
        </mt:SetVarBlock>
    </mt:If>
    <mt:If name="__even__">
        <mt:SetVarBlock name="even_column" append="1">
            <$mt:var name="category_summary"$>
        </mt:SetVarBlock>
    </mt:If>
</mt:Categories>

Output the variables:

<div id="odd-column">
    <$mt:Var name="odd_column"$>
</div>
<div id="even-column">
    <$mt:Var name="even_column"$>
</div>

If you have other examples of this, please blog them and leave a comment or just leave a comment with an example.