How To Create Mini Photo Albums on WordPress Post Pages

August 28, 2009, Posted by Christopher at 2:29 pm

WordPress post pages photo albums In this article we will be creating mini photo albums on our WordPress post pages in the photography category. These photo albums will replace our standard “Related Posts” link lists on these pages and create a very nice graphic display of related photographs. Hopefully this will make it easier for your blog visitors to find related photographs and entice additional page visits.

In my TimThumb thumbnail article I talked about the wonderful flexibility that timthumb.php offers. I also stated that my next project with this program would be to create mini photo albums on the post pages in my Art and Photography Category. Well, I am happy to announce that I have actually completed that project A LOT quicker then I thought I would.

Before reading this article, it is suggested that you take a look at the following previous articles. By reading these articles first you will have a much better understanding of the procedure to create the photo albums :
1. Beautiful and Easy Thumbnails with TimThumb
2. How To Display Subcategories & WordPress Category Templates
3. WordPress Loop Inside Of A Loop

You can see an example of the mini photo albums on my Clover Flowers post. The photo album appears below my signature in the “Related Posts” section.

STEP 1.
You must have timthumb.php installed on your WordPress blog or this code will not work. If you need to install timthumb.php, please visit the Timthumb Page for details.

STEP 2.
The first step is to create a custom field on your “Add New Posts” page in WP admin. Click on “add new” in the custom field section of the page and add a new field named photoalbum. You can obviously change the field name to anything you would like.

STEP 3.
Add the following code to your “single.php” page. (this page displays your individual posts)

<B><h3>Related Posts:</h3></B>
<?php $photoalbumlink = get_post_meta($post->ID, ‘photoalbum’, true);
if ($photoalbumlink) {
?>
Below are more photographs from the same photo album. You can visit the main photo album page if you would like to see all of the photographs from this album.
<BR>
<?php $my_queryphoto = new WP_Query(’cat=’.$photoalbumlink.’&showposts=10′); ?> <?php while ($my_queryphoto->have_posts()) : $my_queryphoto->the_post(); ?>

<?php
$thumbnail = get_post_custom();
$scrap = get_bloginfo(’wpurl’) . ‘/wp-content/themes/YOUR_THEME_NAME/timthumb.php?’;
if (empty($thumbnail['thumbnail'][0])) {
$imagpath = $scrap . ’src=’ . get_bloginfo(’wpurl’) . ‘/wp-content/themes/YOUR_THEME_NAME/images/thumbnail.jpg’ . ‘&w=100&h=80&zc=1′;
} else {
$imagpath = $scrap . ’src=’ . $thumbnail['thumbnail'][0] . ‘&w=90&h=70&zc=1′;
}
?>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php echo $imagpath; ?>” alt=”<?php the_title(); ?>” /></a>
<?php endwhile; ?>

<BR> See more photos in the album: <?php wp_list_categories(’include=’.$photoalbumlink.’&style=html&title_li=’); ?>

<?php } else { ?>
<?php similar_posts(); ?>
<?php } ?>

<?php rewind_posts(); the_post(); ?> <--- your MIGHT need this snippet

CODE BREAKDOWN: Here is a breakdown of the above code …

First … in my example, when you want to display the mini photo album on the post page you should enter the cat id (number) of the category you want displayed as the photo album. Enter this number as the value for your photoalbum custom field when you are adding a new post. This is especially useful if you post photos to more then one category.

<?php $photoalbumlink = get_post_meta($post->ID, ‘photoalbum’, true);
if ($photoalbumlink) {
?>
This segment of the code checks to see if your post has the “photoalbum” custom field specified. If the photoalbum field has been filled out when you wrote your post (true statement) then it is renamed to photoalbumlink. If the photoalbum field was not filled out, then we jump down to the else statement further down the page.

<?php $my_queryphoto = new WP_Query(’cat=’.$photoalbumlink.’&showposts=10′); ?> <?php while ($my_queryphoto->have_posts()) : $my_queryphoto->the_post(); ?>
We need to create another loop to pull-in the photo thumbnails for the photo album. Since I am already running 2 other loops on the post page (gallery at top of page and the loop to pull the post info in) I needed to pick a unique term for this loop – “queryphoto”. See the article link above for “Loop inside of a Loop” for more information on this. In the query I am specifying which category/subcategory to pull the thumbs from using cat=.$photoalbumlink. with the photoalbumlink being the cat id number that we specified in our custom field when we created the post. I am also requesting that only 10 post thumbnails be shown.

<?php
$thumbnail = get_post_custom();
…….. THROUGH …….
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php echo $imagpath; ?>” alt=”<?php the_title(); ?>” /></a>
All of this code is from timthumb.php. There is really no sense to go through all of it again in this article. If you are unfamiliar with any part of this code, please take a look at my article: Beautiful and Easy Thumbnails with TimThumb.

<BR> See more photos in the album: <?php wp_list_categories(’include=’.$photoalbumlink.’&style=html&title_li=’); ?>

<?php } else { ?>
<?php similar_posts(); ?>
<?php } ?>
There are 2 important parts to this code segment.

1. The “See more …” segment of the code creates a link to to the rest of the pictures in this photo album (category). The “include” requirement is telling WordPress to link ONLY to the category specified in our custom field. This is the same category that was used in our query posts above.

2. Everything after the “ELSE” statement is displayed if you DID NOT specify a cat id in your photoalbum custom field of the “add new post” page. In other words, if you leave it blank the following will display. You will need this so WordPress will know what to display on post pages that are NOT in the photography category. In my case above, I am using a “similar posts” plugin to display text links to similar posts. If you look below in the “related posts” section on this page you will notice that NO photo album appears, just the related posts links.

<?php rewind_posts(); the_post(); ?>
You will need this little piece of code IF you need to return to the original post query. You will need this for your comments box IF you place this photo album above it. You may also need it if you have social networking submission links below the photo album. I am not 100% comfortable with this little code piece, but as far as I can tell is that it is telling WordPress to re-populate the “query” with the original query post information. For example, the permalink and the title from the post that displays on your page.

WHY AM I DOING IT THIS WAY

When you look at all the above code, you may notice that there may be slightly easier ways to accomplish this task. Maybe you have seen a “related posts” program that would accomplish this. Maybe a gallery program would. But I can pretty much guarantee that those will not offer you the type of flexibility that this does. The above method offers post-by-post flexibility. I would like to see a standard plug-in offer that.

This method is very useful for me because I post my photographs in up to three categories. For a photo of the ocean I may display it in the “ocean” category, the “scenic” category, and the “Patrick’s Point” category. For my post page mini photo albums I would like to display related pictures based upon the LOCATION (Patrick’s Point) so I would select that cat id for my custom field.

As a side note, my Patrick’s Point Category is a sub-sub-category. It is semi-hidden under my “Photos By Location” subcategory under the photography category. This, I suppose, will be yet another article in the near future.

The flexibility of this method is endless. For example, I could display a photo album of flowers on the bottom of this post if I so desired, just by entering the cat id in my custom field. I think you probably get the picture …

Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Always remember to save copies of your original files BEFORE you modify them. This will allow you to easily revert your web site if the changes do not work.

Comments ( leave a comment here ) and thoughts ALWAYS welcome !