Print, video, sounds

Movable Type 4-up archive

I make an archive page for the Journal section used to display the year's and the months of the posts with 4 posts per column. pdf version
Journal-4-up-page.jpg
For the "Journal" section of the website I needed to display all the posts in a given year, as well as all the posts in a given month. I made a Movable Type template module called "Archive list four-up". That made a set of columns with four post entries each. This  module got called by both Archive Templates, "Yearly Entry Listing" and "Monthly Entry Listing".

I initially sorted through the posts using the __Counter__ variable that Movable Type creates as it cycles through the entries when you use the <mt:Entries> to </mt:Entries> loop. I did an "<mt:if> test with  __counter__ like="1, 5, 9" to find the top listing of the first three columns. This was dumb.		 It meant that I had to keep adding numbers as the number of posts grew, maybe as many as 365 in a year. The test didn't work right, since it would yield true for any number that had a 1, or a 5. The __counter_ at 15 would be true, as well as any other number with the digits 1 or 5 or 9. I tried using eq= as a test but that didn't seem to work at all. Like= is for strings, so it would find those inadvertent matches. I don't know why eq= came up with no matches. Ahhh Perl. No doubt operator error.

So I re-did the whole module. I created a variable colpos for "column position" and let it count from 1 to 4 before resetting it back to 1. As Movable Type cycled through entries, the colpos variable was the number of post, 1-4.
Bottom of first columnmove down to the left
Now I could build the table that was for each of the columns that held four entries.

<$mt:Var name="colpos" value="0"$>
<mt:Entries>
<$mt:Var name="colpos"  op="++" setvar="colpos"$>

The above created the variable colpos, and initialized it to 0. Then I went into the loop for all the entries. This loop is in context. If you are making a yearly archive it will loop through all the entries from newest to oldest. If you are building a monthly archive page, it will loop though the post entries for that given month.

That next line increments the colpos variable from 0 to 1. It took several hours to remind myself how Movable Type does an increment of a variable. Without the setvar part, it would just output the colpos plus one, without changing hte variable itself. Sigh, Perl.

<mt:If name="colpos" eq="1">
 <table class="content-table cat-page" ><tbody><tr><td class="content">
  <mt:If name="__first__">
   <h1><$mt:ArchiveTitle$> posts</h1>
  <mt:Else>
   <h1><$mt:ArchiveTitle$> posts (con't)</h1>
  </mt:If>
</mt:If>

These lines test colpos if its a "1" and if so, outputs the HTML for the top of the table that makes a column. Inside that test is anther test for if the "1" post is the very first post, ie, the most recent. That gets a heading of the year or month, and the word "posts". If colpos is a 1 but it's not the very first, the <mt"Else> changes the header text to "posts (con't)". So the first column of 2014 is "2014 posts" and the remaining columns get the header "2014 posts (con't)".
move up a little to the right move down to the left
Next comes the contents of the column with four posts listed.

<div class="four-col">
<img src="<$mt:BlogURL$>horz-bar.gif" class="horz-bar" alt="horizontal bar">
<$mt:Include module="Entry Summary Yearly"$>
</div>

I give the div a class to style the size and appearance of the posts. I put in a horizontal bar to separate the posts form one another. I used a subtle gradient grey in a gif file. Then I call the module "Entry Summary Yearly" that puts a thumbnail picture and the deck, called excerpt text, and makes them the link to the post URL.

<mt:If name="colpos" eq="4">
<$mt:Var name="colpos"  value="0"$>
 </td>    
 <td><img src="<$mt:BlogURL$>sidebar.gif" class="vert-bar" /></td>
 </tr>
 <tr>
 <td class="pointer-cell"><img src="<$mt:BlogURL$>flow-pointers.gif" class="flow-pointers" alt="move up a little to the right" /> <img src="<$mt:BlogURL$>flow-pointers-end.gif" class="flow-pointers-r" alt="This is the end." /></td>
 <td class="post-pointer-cell"></td>
 </tr></tbody></table>
<mt:Else>

Now I test for the colpos being a "4", or the last post in any column table. If so, I reset colpos to 0, where it will be incremented to a "1" right as the next loop starts. Then I output the HTML for the bottom of the column table. I used tables to display the posts so the web page is responsive. On a wide screen it will display 3 or 4 columns. On a phone it displays just one. The columns are floated left in the CSS.
move up a little to the right move down to the left
Next I have to test if the post is the last post, since the last column does not have to have 4 posts in it. So the <mt:Else> is saying colpos was not a 4, but then I test to see if it was the last post.

 <mt:If name="__last__">  </td>    
 <td><img src="<$mt:BlogURL$>sidebar.gif" class="vert-bar" /></td>
 </tr>
 <tr>
 <td class="pointer-cell"><img src="<$mt:BlogURL$>flow-pointers.gif" class="flow-pointers" alt="move up a little to the right" /> <img src="<$mt:BlogURL$>flow-pointers-end.gif" class="flow-pointers-r" alt="This is the end." /></td>
 <td class="post-pointer-cell"></td>
 </tr></tbody></table>
 </mt:If>
</mt:If>

If the entry post is the last post, then I do the exact same HTML closing of the table as if it was the fourth post at the bottom of the column. Then I close the "last" test with  </mt:If> and then I close the test for the 4th post with  </mt:If>.

Then I close the entries loop with the last line:
</mt:Entries>

Movable Type is rare in that it is software that tries to be context-aware. So when you publish an entry, it next will go and make all the archives, in my case the monthly posts, and yearly posts. Archives could also be author or date or dozens of other things. What is nice is when the program is making a page of the years posts, the <mt:Entries> loop will return all the posts for that year. If the program is building a monthly archive page, the <mt:Entries> loop will only cycle through the posts for that particular month.
move up a little to the right move down to the left

This post is in these categories:

Categories

 border bar
Bottom of first column This is the end.