« How to Make a Pop-up Window | Main | HTML or PHP? »

Creating a Photo Album

Looking for a way to incorporate a Photo Gallery into your MT blog? Check out the PhotoGallery plugin from majordojo.com.

The following LMT tutorial is completely out of date. ~Elise Feb 22, 2007

There are many ways to create a web-based photo album or photoblog in Movable Type. This tutorial addresses just one method for creating a photo album, and is based on the steps I took to create my MT-based photo album. This tutorial is for experienced MT users and assumes familiarity with plugins, CSS, creating a new weblog, category archiving, and uploading images. Although long, the tutorial is easier than it looks, especially if you want a photo album that works just like mine. It's always the customizations that take time. In this tutorial I will give out many pieces of code that I use in my photo album which you are free to use and share. Note that my album is designed to be an album, along the lines of Typepad Photo Albums, and organized around categories, unlike a photoblog which is more often organized around dates. As such, this tutorial assumes that you want to make a similar album type of photo weblog. If you are more interested in making a date-based photoblog, please see the links at the end of this tutorial.

This tutorial requires that you have Image::Magick installed on your server in order for MT to generate thumbnails. This tutorial requires the following plugins: MTGrid and PreviousNextInCategory. Before getting started install the MTGrid and PreviousNextIn Category plugins if they are not already installed. Be sure to remember to CHMOD the .pl files to 755.

1. Create a new weblog for your photo album. (See Creating a New Weblog). In your weblog config preferences, set Allow Comments default to none. In your weblog config archiving section, select both Individual and Category archive types. Note that the default archiving method is monthly. I have found that you cannot deselect monthy and rebuild without errors unless you remove the associated monthly archiving tags from the Main Index template. You can leave monthly checked for now and uncheck it later after you have adjusted the templates. In your weblog config preferences section you can choose the file extension for your archive files. If your server supports PHP, you may want to consider using .php as the extension instead of .html. There is a PHP script that enables you to generate random photos but it only works on pages with php extensions (link provided at the end of this tutorial). See my photo album for a demonstration. (Keep refreshing the main page and a new photo will appear.)

2. Load images. This part is tricky. Rather than loading all of your images at once, I recommend loading only a few (4 or 5) at first. With a few entries already posted you will be able to more easily to see the affects of your modifications to your templates. Once you have your weblog how you want it, you can go back and add the rest of your images. Back to the tricky part. You will be putting your regular image file into the Entry Body section of the New Entry page, the thumbnail into the Excerpt section, and any written description (beyond a title) into the Extended Entry section. Here are the steps:
a. Select Upload File from the sidebar menu of your webog edit window. (See Uploading Images and Photos). Select an image to upload. Select Local Site Path or Local Archive Path and enter a directory path that would make the most sense for the storage of this image. If you do not already have the directories made, MT will make them for you with this step. Select Upload.

local_site_path.gif

b. Select Create a New Entry in the popup window. Take note of the image dimensions in the thumbnail section. Write them down; it will make your life easier. Select Create a thumbnail.

create_thumbnail.gif

Select Constrain proportions. Select a size for your thumbnails. A good standard size is 96px. The important thing is to use the same size of thumbnail square dimensions for all the the images within a category because we will be laying these images out on a grid on the category pages. If your image isn't square, pick the longest dimension and give it 96 or whatever size you have chosen.

create_thumbnail_2.gif

Click outside of the size window and the other dimension will adjust proportionally. Select Embedded Image.

c. A new entry will be generated with something that looks like the following in the Entry Body Window:

entry_body.gif

Copy the middle image tag (shown here in pink) and paste it into the Excerpt Window. (If you can't see your Excerpt Window, click on Customize the display of this page and select the Excerpt Window option.)

entry_body_pink.gif

In the Entry Body window, delete the a href tags and the text -thumb. (Items to delete are shown here in yellow).

entry_body_yellow.gif

Replace the small thumbnail dimensions with the original dimensions of the image that you noted earlier.

Create a title for your photo entry. Create or select a category. Put descriptive text into the Extended Entry section. At this point, your photo entry page should look something like this:

entry_window.gif

Save your entry! After you have uploaded a few photos you can now start to work on the next step - templates.

3. Modify your Main Index template. Your photo album's Main Index template will be a stripped down version of the default template. The Main Index template is pretty straightforward. It contains a banner with your weblog's name and description if you have one, a single photograph in the body of the page, and a sidebar with links to category archives. The main photograph on this page could be a static photo (as in the template below), a random photo (scroll to near end of tutorial for link to instructions), or the last "n" entries of your photo weblog. You may want to start simple and modify the templates after you get the core weblog up and running. The following is the essence of the Main Index template for my photo album:

(Note that in this case I am starting with the default templates that come with MT2.661. If you are using MT3, these templates will still work, you must make sure that the stylesheet is an MT2.661 stylesheet like the one that I am using for my photo album.)


4. Modify your category archive template. We are going to lay out thumbnails of our images on a grid on the category archive pages. See my friends category page for an example. To accomplish this we will be using tags from MTGrid on the category archive template. See MT Extensions for an explanation of how the MTGrid tags work. Note that in the banner I have a navigation element indicating what category you are in, after the title of the weblog. The following is the essence of the Category Archive template for my photo album:




5. Modify your Indiviual Entry archive template. On my Individual Entry pages I have directional arrows above the photo. (See example.) The left and right arrows will scroll you through all of the photos in the primary category of the entry. This function requires the PreviousNextInCategory plugin. The top arrow will take you back to the category page. The arrows are arranged in a table so that they stay in the same place as a viewer scrolls through the images. Here is the essence of the Individual Entry archive template I use in my photo album:



6. Style templates. The last step is to modify the style template for your photo album. I have added one CSS class to my stylesheet and that is a class for inserting a border around the photo images. In my stylesheet it is called .photo. You are pretty much on your own here when it comes to style. I'm am definitely not an expert in CSS. However, you are welcome to copy the stylesheet I use for my photo album which can be found here.

7. Bonus - Random Photos. As mentioned earlier in this tutorial if you have php extensions on your weblog you can incorporate a simple script that will allow you to serve up photos randomly from a file of photos. The script and instructions can be found at A List Apart at the Random Image Rotation tutorial. Enjoy!

Links:
www.photoblogs.org - a listing site for photoblogs
Easy Thumbnails - an alternative to Image::Magick (Windows only).
PHP Thumbnail Generator - make photo thumbnails in a manner that doesn't distort the image.
Gallery - free software for creating a photo gallery.
Flickr.com - a free hosted service for easily maintaining a photoalbum, with thumnails that you can place on your site with javascript.
Stop Design New Photo Galleries tutorial - using the Photon tool to export iPhoto images directly into MT.


Note: The above tutorial is pretty long and involved and very specific to a certain type of weblog-based photo album. I'm interested in your comments as they pertain to this particular set of instructions. Questions related to photoblogs, but not specific to this precise tutorial, should be directed to the helpful and wonderful Movable Type Support Forums. Questions regarding modifcations to the instructions or templates I've discussed here should also be directed to the MT Support Forums. Thanks!