Aug 11th 03

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 {
text-align: center; }

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>

<strong><$MTEntryTitle$></strong>

<MTEntryNext> ::
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
» </MTEntryNext><br />

<a href="/photography/" class="img">
<img src="<$MTEntryMore$>"
alt="<$MTEntryTitle$>" class="photo" />
</a><br />

<a href="/photography/"
title="Back to the Photography Homepage" class="img">
<img src="/photography/images/photologo.gif"
width="363" height="69"
alt="Back to the Photography Homepage" /></a>

div#indphoto {
color: #EEE;
margin: 20px; }

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!

8 Comments

Sunny on Aug 12th 03

Awesome write up! Very detailed information.

It just goes to show the versatility of Movable Type. Its not just a blogging tool but also a very simple (and powerful) CMS. You must have also seen Doug’s write up regarding his portfolio section which he built with MT. Enlightening stuff.

KO on Aug 12th 03

Why not also add comments to the pictures?

Also, you don’t need to use seperate fields to store the image and thumbnail filenames. If you have thumbnails named like picture_name-thumb, then you can just use: .jpg for the full fize picture and -thumb.jpg for the thumbnails. That frees up a field for picture descriptions if you want to add one.

KO on Aug 12th 03

It seems to have stripped away the MT tags.. it should be: Store just the picture name in MTEntryMore minus the file extension, and for the thumbnails add -thumb to the name of the picture.

$MTEntryMore$.jpg for full size and:
$MTEntryMore$-thumb.jpg for thumbail.

Adam Polselli on Aug 12th 03

Hey, that’s a great idea! The only problem is the width and height dimensions. Since I have both horizontal and vertical photographs, there isn’t a set dimension.

Right now, because I embed the thumbnails, they do have a set width and dimension, but the full-size images don’t. I figured it didn’t matter because there’s only one full-size per page, and it wouldn’t cause a lot of “jumping.”

scott on Aug 16th 03

since your using php anyway, you could use the getimagesize( ) function to specify the height and width of the photo. This mighthelp with your portrait/landscape problem

nick on Aug 27th 03

i did something fairly similar and got all my photo galleries plus a photoblog running as one weblog here. it required a little more, um, customizing, shall we say? but it’s way less tedious than creating straight html pages and way prettier too. i’ve been thinking of a way to wedge in the getimagesize() function to save me a little work, and maybe i’ll do it someday. or maybe you or someone else will figure it out for me.

Justin Blanton on Aug 27th 03

While I appreciate the effort, I cannot bring myself to go through all that trouble. I’m still waiting for Six Apart to integrate photo album functionality into MT. Hopefully this will be done sooner than later as I’m itching to put some photos up.

MattyMatt on Feb 7th 04

hello there…just wanted to say thanks for a very informative write-up. i’m in the midst of getting my photoblog act together at http://iknowwhatimdoing.com/photo and you’ve definitely given me a bunch of great ideas. rock on!

Comments are now closed for this entry.