Basic Photoblog (Gallery) Templates


Published on October 6, 2005 at 3:25 PM EST
In the Tutorials category.

A spaghetti noodle sauced with detailed templates to build your own photo gallery in Movable Type.

I’ve assembled some templates to build a photo gallery with Movable Type. What makes mine different and special from all the others? Easy: it’s compatible with MT version 3.2. That means it’ll work with the StyleCatcher plugin and the Movable Type Style Generator!

The only special requirement to use these templates is PHP. PHP is used to calculate the image size. The plugin Better File Uploader—with its For Photo Gallery button—will make adding photos go much quicker.

I’ve created a small example gallery, if you’re interested in seeing the result before trying it yourself.

Setup a New Weblog

First, you’ll want to create a new weblog. Fill in the name and path information and save, but don’t rebuild. Go into that weblog’s Settings screen, select the Publishing option, and change File Extension for Archive Files to php from html. Set any other settings as you like.

Changing the File Extension for Archive Files won’t affect the Main Index or Master Archives Index templates, so those must be changed. Go to the Templates screen and open each of those templates, changing their file extension from html to php (to read index.php and archives.php).

Add the Photo Gallery Templates

Below you’ll find my photo gallery templates. Copy and paste them into the appropriate template type, being sure to save each one before moving onto the next.

Main Index Template

Master Archive Index Template

Category Archive Template

Date-Based Archive Template

Individual Entry Archive Template

Adding a Photo to your new Weblog

First, prepare your photo with whatever image-editing software you use. The image shouldn’t be more than 480 pixels wide.

As I said in the beginning, you really want to use the Better File Uploader plugin to streamline the upload process.

  • With Better File Uploader: Click the Upload File button in MT, select your image and click Upload. Next, click the For Photo Gallery button. All done!
  • Without Better File Uploader: Click the Upload File button in MT, select your image, specify a Local Site Path to upload into and click Upload. Size your thumbnail and click Embedded Image, being sure “Create a new entry…” is selected. In the resulting New Entry screen, pare the code down to just the file’s path, minus extension. Only http://www.example.com/images/myphoto should appear in the Entry Body field.
http://www.eatdrinksleepmovabletype.com/upload/2005/10/pgt-thumb.gif

On the New Entry screen, enter the photo’s title and select a category. The photo path must appear in the Entry Body field. If you like, enter a caption in the Extended Entry field. Publish and Save!

That’s it!