WordPress Hacks: Build a Photo or Movie Poster Gallery

Use number #4 of my 48 Unique Ways to Use WordPress article was “image gallery/ photoblog”. Item #29 was for a CSS or site awards gallery using a WordPress Gallery theme, such as the free one from OS Designer or the paid one from WP Designer. I know that OS Designer’s theme can be used to build a photo or movie poster gallery, as I’ll discuss shortly. I’m guessing that WP Designer’s theme can be used as well.

The idea for this WordPress hack comes from Jason Schuller’s visually impressive TrailerFlick site. Jason has hinted that he might someday release something similar. I couldn’t wait, so I used OS Designer’s gallery theme to build Posters@FilmScenic (which is still under development). That’s a movie poster site, but I’m also planning to use the them to build up FotoFiler.com.

This hack is really quite easy, but there are a few things you should know.

1. OS Designer’s gallery theme uses a thumbnail sizing plugin that allows you to change the maximum size of the thumbnail created when you upload an image (picture or movie poster). But the way the theme has been designed, you’ll using more than a maximum of 225 pixels wide in the plugin’s setting might cause you problems. (See below for clarification.)
2. This thumbnail setting refers to either dimension of a thumbnail, as displayed on the homepage of your photo or poster gallery.
3. For aesthetic reasons, you’ll probably want to crop all your images to exactly the same dimensions before uploading them to the gallery them. For example, the movie posters at FilmScenic are 500 px w x 730 px h, which results in homepage thumbnails that are 225 w x 329 h.
4. Don’t use overly long post titles, or the homepage items will not be aligned properly, vertically.
5. The theme also uses a voting plugin. You can skip it if you don’t want visitors rating each image.
6. The permalink page for an item in the gallery is accessed by clicking on the entry title. Clicking on the image takes you to a page that you specify in a custom field for a given entry. (Keep in mind that you have to specify the thumbnail and full-sized images using custom fields. Please read the installation and usage instructions for the OS Designer theme.)

If you are setting up a photo blog and will have some images in landscape mode and others in portrait mode, I don’t suggest you use this gallery. However, there is a way to get around the thumbnail sizing issue, as discussed in the section below.

Improvements

Here are some things you can do to customize your photo / movie poster gallery. (Warning: intended for advanced WordPress users not afraid of tweaking theme template files.)

1. Make the “Categories” mini-tab prominent. The “Tag Cloud” mini-tab is visible first by default, but if you only use galleries, you can tweak tabber.php. You’ll need to move the code fragment for the category to the “top” of the code block.
2. Enable item text. Out of the box, the OS Designer gallery theme does not show any text that you might type in when creating a new entry. For a photo gallery, you might want to add some photo/ camera details. For a movie poster gallery, you might want to provide some movie details or even a short review. Please see my WordPress Hacks: Build a Web Directory article for details on enabling item text. (You’ll need to add a WordPress function call to single.php.)
3. Lightbox your images. If you want a photo gallery in which some images might not conform to a uniform dimension, there’s still hope for using the OS Designer gallery theme. I haven’t set it up yet myself, but theoretically, you can do the following:
   1. Install a “lightbox” plugin, such as Jason Schuller’s Fancy Zoom, which I discussed in Jazzing Up Your Images. (You’ll need to add a parameter to your “body” tag in the header.php file. The plugin has instructions.)
   2. Upload two versions of each image. One will be normal, and will be linked to from the URL custom field, which is normally used to link to a page that you specify. (For example, my posters link to movie profile pages on Filmzee.) The second image should be cropped to a uniform dimension that you decide upon (500 px wide, max). When you upload this cropped image, the thumbnail will also be uniform. (The only drawback is that you’ll need disk space and bandwidth for three different image files per gallery entry.)
   3. Tweak index.php to change the use of the URL custom field, if necessary. Currently, you use the field to specify a page to link a thumbnail image to.
4. Lightbox a video trailer. For a movie poster gallery, you could go one step further to reproducing something like Jason’s TrailerFlick by using a lightbox equivalent for videos such as Mediabox, Videobox or Videobox-lb. (Notes: The first Videobox is a WordPress plugins but the second one may not be. I have not tested any of the code.)

Also check out Lorelle’s article on WordPress multimedia plugins for related information.