One of the cool things recently introduced in WordPress (version 2.5 if memory serves me correctly) is built-in photo galleries. I’d wanted to host my own photo galleries locally for ages instead of relying on a 3rd party like Flickr and once again WordPress came up with the goods in the nick of time (I was getting close to rolling my own which wouldn’t have been ideal).

You may have noticed that when I upload a photo album here on John’s Adventures you don’t see all the photos on the home or archive page, you see a single photo from the album, a description and a link to view the full album. Pretty much like this:

While WordPress doesn’t currently support this functionality out of the box, it’s actually pretty straightforward to implement in your own theme by following these steps…

Add Some Theme Functions

You’ll probably have a file in your theme directory called functions.php - if not then create one (making sure the first line is ‘<?php’ and the last line is ‘?>’ without the quotes) and add the following code to it:

function jc_get_gallery_info( $post_id = 0 )
{
   $post = get_post($post_id);
   $images = get_children( array(
      'post_parent' => $post->ID,
      'post_status' => 'inherit',
      'post_type' => 'attachment',
      'post_mime_type' => 'image',
       'order' => 'ASC',
      'orderby' => 'menu_order ID') );

   if( is_array( $images ) ) {
      $attachments = array_values( $images );
   }
   if( !isset($attachments) || count($attachments) == 0 ) {
      return array( 0, '', 0 );
   }

   $img = wp_get_attachment_image($attachments[0]->ID, 'thumbnail', false);

   $total_comments = $post->comment_count;
   foreach ( $attachments as $k => $attachment ) {
      $total_comments += $attachment->comment_count;
   }

   return array( count($attachments), $img, $total_comments );
}

function jc_comments_number(
   $number, $zero = false, $one = false, $more = false )
{
   if ( $number > 1 )
   {
      $output = str_replace('%', $number,
         ( false === $more ) ? __('% Comments') : $more);
   }
   elseif ( $number == 0 )
      $output = ( false === $zero ) ? __('No Comments') : $zero;
   else // must be one
      $output = ( false === $one ) ? __('1 Comment') : $one;

   echo apply_filters('comments_number', $output, $number);
}

Create a Photo Gallery Category

You’ll need to create a category in WordPress that you’ll assign to all your photo albums to and note down the ID it’s been given. If you go to Manage > Categories in the admin section once you’ve created it and hover over the category you’ll see a URL in your status bar that ends with cat_ID=x - it’s the ‘x’ you’re interested in. On my site that number happens to be 25.

Change The Index and Archive Templates

Next you’ll need to edit any template file that you want to show the overview on. Examples are index.php, archive.php, category.php and search.php. In the default WordPress theme if you have a look at index.php you’ll see the following section:

<?php while (have_posts()) : the_post(); ?>

 <div class="post" id="post-<?php the_ID(); ?>">
	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
	<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

	<div class="entry">
	   <?php the_content('Read the rest of this entry &raquo;'); ?>
	</div>

	<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
 </div>

<?php endwhile; ?>

Your own theme may look a bit different within the ‘while’ loop but you don’t need to change that, you just need to add the sections between the ‘begin new’ and ‘end new’ comment tags so you end up with the following:

<?php while (have_posts()) : the_post(); ?>

 <!-- begin new -->
 <?php if( in_category(25) && !is_single() ) : ?>

 <div class="photogallery-entry" id="entry-<?php the_ID(); ?>">
   <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
    <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
   <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
   <?php $info = jc_get_gallery_info(); ?>
   <div class="entry-content">
     <div class="photogallery-pic"><a title="<?php the_title() ?>"
      href="<?php the_permalink() ?>"><?php echo $info[1]; ?></a></div>
     <?php the_content(' '); ?>
     <p>This album contains <strong><?php echo $info[0]; ?></strong> photos
     <?php jc_comments_number($info[2], '', ' and <strong>1</strong> comment',
      ' and <strong>%</strong> comments' ); ?>.</p>
     <div class="photogallery-view"><a title="<?php the_title() ?>"
      href="<?php the_permalink() ?>">View the whole album &raquo;</a></div>
     <div class="photogallery-footer"></div>
   </div>
 </div>

 <?php else : ?>
 <!-- end new -->

 <div class="post" id="post-<?php the_ID(); ?>">
	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
	<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

	<div class="entry">
	   <?php the_content('Read the rest of this entry &raquo;'); ?>
	</div>

	<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
 </div>

 <!-- begin new -->
 <?php endif; ?>
 <!-- end new -->

<?php endwhile; ?>

You’ll probably want to tweak the CSS classes that I’m using in the snippet above for your own tastes. Also, note where ‘25′ is entered, you’ll want to change that to your photo album category ID.

Update Your Stylesheet

Finally, you need to update style.css in your themes directory to add the classes used above. The ones I’m using here are as follows (just paste the styles below into the bottom of your stylesheet):

.photogallery-pic {
  float: left;
}

.photogallery-pic img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #ccc;
  margin-right: 10px;
  padding: 5px;
}

.photogallery-view, .photogallery-view a {
  color: #0066b9;
  font-size: 14px;
  font-weight: bold;
}

.photogallery-footer {
  clear: both;
}

Use The ‘More’ Tag

Now, whenever you create a photo gallery, make sure you put the ‘More’ tag below the text you’d like to appear as the gallery description like so:

Finished

Now that you’ve made those changes you should see your photo galleries showing up differently on your index and archive pages. Here’s what it looks like applied to the default WordPress theme:

And that’s all there is too it! I’m sure there are more efficient ways to achieve this effect and most of it could probably be included in a plugin, but I thought it would make sense if I posted an explanation of how I do it here as a baseline. One final thing to mention is that this works on WordPress 2.6 and above. Hopefully this will be of use to somebody!