Creating an MT-Powered Photo Album

If you have not already noticed, the Photography section at AdamPolselli.com has been completely rebuilt. So, what’s the catch? I’ve used nothing but MovableType to manage and update the entire thing.

After reading “Beyond the Blog” at A Whole Lotta Nothing, I was very intrigued at the thought of using MovableType as more than just a weblog app. So, last night I sat down, made some scratches on a couple post-its, and proceeded to recreate my photo album entirely from scratch. Here is exactly how it was done.

The first step was to figure out which MT fields would stand for what data. I needed a thumbnail photo, a full-size photo, a title, and a category. So, easily enough, I layed the data out in the following manner:

• Title = photo title
• Primary Category = photo category
• Entry Body = the uploaded and embedded thumbnail
• Extended Entry = file name of the full-size photograph

With all that decided, I then had to create the templates. I began with the index, or homepage, template. All it takes to display all of the thumbnails is a few lines of MT template tags and a bit of CSS:

<MTEntries>
<a href="<$MTEntryPermalink$>" class="img"
title="Click to Enlarge Photo"><$MTEntryBody$></a>
</MTEntries>

div#photography img {
border: 1px solid #000;
margin: 5px; }

The master archives were easy to create, pretty much like any other weblog archives, and the individual archives, although very different from all of the other pages, were still just as easy. Again, all it took was a few MT template tags and some CSS:

<MTEntryPrevious> «
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
:: </MTEntryPrevious>

div#indphoto img.photo {
border: 4px double #FFF;
margin: 20px; }


So, to add a new photograph, I first click “Upload File” and upload the full-size photo. After it uploads the image, I simply close the upload pop-up window. Again I click “Upload File,” and this time upload the corresponding thumbnail. When it gives me the option, I select “Create a new entry using this uploaded file” and click “Embedded Image.”

Now, on the Create New Entry page, I fill in Title with the photo title, select a Primary Category, the Entry Body is already filled in with the thumbnail image, and in Extended Entry I type the filename (i.e. sunset.jpg). Just click “Save” and that’s it!

SimpleBits Makes the Switch

Folks, MovableType has gained yet another patron: Dan Cederholm of SimpleBits. Prior to making the switch, Dan was using a Perl/XSLT application that he built himself, and clearly had fun experimenting with, but the fully customizable and flexible MovableType has won him over.

Dan will continue to use SimplePost, which is the official name of his Perl/XSLT app, to manage QuickBits, his fun little mini-blog of interesting and educational links.

Great job with the switch, Dan!