MT + PHP = legible archive listings

06 August 2004 10:09 PM (4 years, 2 months ago) | Filed under code

Site archives often follow the format of a weblog’s front page postings, listing entry excerpts with links to the entry’s individual archive page. In some circumstances, this may take up considerable space without adding to the user’s ability to quickly scan the archives for a specific entry.

On this site, I have used PHP with Movable Type to create phonebook-style listings of entry titles and their entry dates. I found that this is both aesthetically pleasing and fairly simple to implement. Other ways of implementing the alternating colors include using JavaScript on the client side or using MT plug-ins when the site is rebuilt rather than running the PHP to generate class attributes every time the page is called by a browser.

These other implementations may be published at a later date.

In your archive template, you will need the following PHP statement to be within the <li> element of your list of archived entry titles.

<?php
if ($i++ % 2) {
  print "class=\"on\"";
} else {
  print "class=\"off\"";
}
?>

This will increment the variable $i each time the statement is called in successive elements of the unordered list. If the variable is even, the text class="on" is printed; if the variable is odd, class="off" is printed.

The PHP statement can be compressed to one line to aid in legibility of the generated code, as is shown in the following sample from a Monthly Archive template.

<ul id="archiveList">
<MTArchiveList>  <li <?php if ($i++ % 2) {print "class=\"on\"";} else {print "class=\"off\"";}?>>
<span class="entryTitle"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></span>

<span class="entryDate"><$MTArchiveDate format="%d %B %Y"$></span></li>
</MTArchiveList></ul>

In your stylesheet, you will need to define styles to take care of the listing of entry titles and dates.

ul#archiveList {
  list-style: none;
}

ul#archiveList li {
  display: block;
  text-align: right;
}

ul#archiveList li span.entryTitle {
  float: left;
  width: 288px;
  text-align: left;
}

ul#archiveList li span.entryDate {
  float: none;
}

ul#archiveList li.on {
  background: #ccc;
}

Because the class entryTitle is floated to the left, the width must be set to an arbitrary width in order to avoid it being set at 100%, thus pushing the corresponding entryDate to the next line.

The good

PHP is widely available and commonly used to add features to weblogs using Movable Type as their CMS. This technique can also be adapted to other weblog CMS software that allows users to customize their templates to this degree.

The bad

The PHP code is run every time an archive page is called, placing additional load upon the server. However, in light of modern processor speeds, this is not as large a handicap as it used to be.

The ugly

The CSS relies on labeling all the data to provide (perhaps unnecessary) robustness to the XHTML.

Comments on "MT + PHP = legible archive listings"

Leave a comment | Trackback | Comments feed (RSS 2.0)

Sorry, there are not any comments on this entry yet. Would you like to leave a comment?

Leave a reply



XHTML: You may use these tags:

This entry was written 4 years, 2 months ago. You may want to use the search function for a more recent entry on this topic.

Copyright © 2003-2008.
Entries (RSS) | Comments (RSS).
XHTML 1.0 Strict, CSS, RSS, 508.