April 22, 2004

Creating a Photo Album

Looking for a way to incorporate a Photo Gallery into your MT blog? Check out Photo Gallery Templates from StopDesign.com.

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. If you do not have Image::Magick installed, but NetPBM instead, you will need to follow these instructions from the MT manual to enable MT to use NetPBM 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:
(Note in this section I've borrowed extensively from moonpost.com's A Photolog in Five Easy 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. These arrows can be pretty useful. They are very small gif images on a transparent background. If you would like to use them, I've zipped them here and targz'd them here. 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
A Photolog in Five Easy Steps at moonpost.com
MT Wiki's List of Photoblog tutorials
Easy Thumbnails - an alternative to Image::Magick (Windows only).
PHP Thumbnail Generator - make photo thumbnails in a manner that doesn't distort the image.
Quixotic Pixels Tutorial for Creating a Photoblog
Gallery - free software for creating a photo gallery.
Photo Galleries in Movable Type - a tutorial from thinkless.org.
Flickr.com - a free hosted service for easily maintaining a photoalbum, with thumnails that you can place on your site with javascript. Very cool.
MT-PhotoGallery Plugin - a plugin for MT that can help organize photos into your weblog. Some examples of this can be found at PhotoJunkie.
Stop Design New Photo Galleries tutorial - using the Photon tool to export iPhoto images directly into MT.
Movable Type Powered Gallery - from Twisted Technology, uses PHP

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!


Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!

Posted by Elise Bauer on April 22, 2004 to General Tips and Tricks
Comments(15) | Email to a friend | Printer-friendly version


Trackback

If you would like to send a trackback
please use the following URL: http://learningmovabletype.com/cgi-bin/mt32/mt-tb.cgi/216

Comments

Thanks for posting this, Elise, your timing could not have been better. I just installed MT yesterday for the sole purpose of using it as a photo album. (I'll get into the regular blogging as I go, I expect.)

Any ideas on how to customize MT so that you can upload several images at once? I think I'm going to have to learn some scripting.

Thanks,
Sean

Hi Sean - I don't know of a way to upload several images at once. Perhaps if you are using MySQL and have access to MyPhpAdmin to manage the database. If you find a way, please let me know!

This is wonderful. I've just purchased a name for a photo album site I hope to put up soon. Have you seen the Hinagata templates: ?
------------
I hope to share MT tips as I learn them, as well. However, I have to learn more basics before I get around to helpful stuff to share.

Elise, I lived in Marin, and recently worked at Stanford (asst. dean, undergrad admissions). I'll be returning to California in a few weeks from Washington DC. I can't wait.

You've explained some things I was having trouble with - thanks! If anyone is interested in an alternative approach, I also just posted a tutorial for my own MT photoblog. Instructions at http://www.patw.net

Roland, Welcome back to California! Haven't seen the Hinagata templates.

Pat, Hey, your photoblog is pretty nifty. Might I recommend that you post a link to it at the MT Wiki?

Re uploading several images at once: You can do this with Ecto (http://www.kung-foo.tv/ecto/), as long as all the images are the same size and orientation. I use the Ecto client rather than the web interface for Movable Type and can't recommend it enough.

Re photo albums: I've been looking for a way to navigate through categories on a per-entry basis everywhere - thanks so much for saving my day! However, what I want to accomplish is a bit more complicated: I want to keep date-based navigation as the default, however, when a user goes into the category archive, I'd then like to allow next/previous navigation within that category. Does anyone know if it's possible to have two different Individual Archive Templates and call one or the other depending on where you are coming from? TIA

Hi Sibylle - I think the PreviousNextInCategory plugin will work regardless of the date-based archiving. It will just move the viewer to the next photo in the primary category.

I did try to create two different types of category and individual archives depending on the category of my photos and was not able to get it to work. So if someone selected "friends" they would see one type of layout of the thumbnails in the category. If they selected 70s, they would see a different layout. I wasn't able to get that to work after several hours of messing around with it. There probably is a way, with a combination of plugins etc. But I haven't figured it out yet.

Elise - thanks for responding. I figured out how to have both date- and category based navigation, thanks to your entry and Kristine Beeson's tutorial about Using multiple archive templates (http://www.movabletype.org/resources/archives/using_multiple_.shtml).

What you need to do is create a second Individual Entry Archive by duplicating the regular Individual Entry Archive (I named the duplicate "Individual Entry Archive - Nav by Category").

Add the new archive to the weblog based on Kristine's instructions. I'm using
<$MTEntryCategory$>/<$MTEntryID pad="1"$>cat.html"
as path for the filename in Weblog Config.

Once the new template exists, you can link to it. This needs to be in two places:

1. In the newly created duplicate of the Individual Entry Archive template, add the next/previous navigation within the category.

I'm using

<MTEntryNextInCategory>
<a href="<$MTBlogArchiveURL$><$MTEntryCategory$>/<$MTEntryID pad="1"$>cat.html">next in <MTEntryCategory></a>  
</MTEntryNextInCategory>

and

<MTEntryPreviousInCategory>  
<a href="<$MTBlogArchiveURL$><$MTEntryCategory$>/<$MTEntryID pad="1"$>cat.html">previous in <MTEntryCategory></a>
</MTEntryPreviousInCategory>


In the regular Category Archive, where you link to individual entries, replace

<$MTEntryLink$>

with the same file path that you previously added to Weblog Config. In my case, it was:

<<$MTEntryCategory$>/<$MTEntryID pad="1"$>cat.html">

Now, when someone accesses an entry coming from a category, the next/previous navigation will remain within that category. In my case, it will be a photoblog, and categories will be "albums". The default navigation however is still date-based.

Hi Elise ! I just wanted to thank you for the great tutorial which resulted in a pretty web album !
You can visit it at : http://www.kyramarios.gr/album/
I am in the process of customizing it.
Thanks again.
Cheers
Nikolas

Hi Elise,
Thanks for the fantastic tutorial! Actually, this whole site is full of gems! Using your tutorial, I have created a photo album to put all of my old photos of grandparents, great-grandparents, and great-great grandparents, as well as old shots from my childhood. you can see it here: http://pappergank.com/ms/oldphotos/
Thanks for the great resource! I'll visit often, I'm sure.

Thank you for this great tutorial! I've been keeping a family blog for many months -- it's aimed at the grandparents, who can see pictures and updates on their grandson. Thanks to your very clear and user-friendly instructions, I now have a supplementary photo album.

I have developed a simple MT plugin to help with this called MTRecentImages. It trolls through your entries and pulls out images from the posts. You can see a couple of examples of the output at http://www.multiply.org/notebook/ and http://billy.multiply.org/blog/recent_photos.html .

The plugin can be downloaded at http://www.multiply.org/perl/mtplugs/. I am wrapping up adding automatic image thumbnail generation now and should have an updated version up within a few days.

Thanks for your great site--it's been a big help in getting mine set up. As far as photo albums go, I used a tutorial at http://dlugosz.net/archives/2003/02/28/integrating-gallery-into-movabletype/ to integrate gallery into my site and it seems to be working fine. Gallery is an amazing photo album and very easy to use. But my site still has a way to go so I'm moving through your tutorials one at a time.

Elise, is there w way to make the thumbnails a uniform size and not distort the pictures? If I just make them 96x96 will it just cut off the edges? I assume it would stretch and distort. I'm basing this on the Typepad photo grids.

Hi Scazz, yes, the thumbnail feature will distort the pictures if you don't keep them at the same relative dimensions. There may be plugins for this, or other thumbnail creating programs that can help with this. I think I've seen this topic at the MT Forums, so you might try a search over there.

Comments are now closed for this entry.


Email to a friend

Email this article to:


Your email address:


Message (optional):