The Four Rotating Images
Thu Jan 30 2003

The core of my site is a single Movable Type weblog with two categories; "General" for text entries, and "Photos" for pictures.

The rotating four-image pane on the right is done through calls to Movable Type's <MTEntries> tag to pull content from the "Photos" category.

The four most recent images shuffle through the four panes, flowing left to right, starting at the top-left pane, and exiting at the bottom-right. But you can code your own site to flow images any way you want.

Each image post is actually two separate files: a smaller thumbnail, and a large full-sized version. The thumbnail is uploaded and its automatically-generated HTML code is put in the "Excerpt" box in a new entry, and the HTML code from the uploaded large image goes in the "Entry Body". This will be important for the following code example to work.

(On my site, I use CSS for the layout of each of the following calls to <MTEntries>, but you can just as easily use HTML tables.)


<!-- Top Left -->
<MTEntries category="Photos" lastn="1">
<a href="<$MTEntryLink$>"><$MTEntryExcerpt$></a>
</MTEntries>

<!-- Top Right -->
<MTEntries category="Photos" lastn="1" offset="1">
<a href="<$MTEntryLink$>"><$MTEntryExcerpt$></a>
</MTEntries>

<!-- Bottom Left -->
<MTEntries category="Photos" lastn="1" offset="2">
<a href="<$MTEntryLink$>"><$MTEntryExcerpt$></a>
</MTEntries>

<!-- Bottom Right -->
<MTEntries category="Photos" lastn="1" offset="3">
<a href="<$MTEntryLink$>"><$MTEntryExcerpt$></a>
</MTEntries>


Walking through the code blocks...

<MTEntries category="Photos" lastn="1">
This tells Movable Type to show the last posted entry in the category named "Photos"

<a href="<$MTEntryLink$>"><$MTEntryExcerpt$></a>
This code is repeated for each, and tells Movable Type to display the Entry Excerpt (containing the thumbnail) and link it to the Entry (containing the large version of the image.)

Next...
<MTEntries category="Photos" lastn="1" offset="1">
This is the Top Right image, and this time Movable Type is being told to show the last entry from "Photos", but the offset="1" tells it to go back one, meaning the second from last entry.

In the last two examples, the only difference is the change in offset. For each subsequent image it's incremented by one, telling Movable Type to go back that many entries from the most recent posted to the "Photos" category.