So I’ve been uploading photos for a few months now to my photoblog and it’s been interesting. I love the Autofocus theme and all the amazing things it does, but it lacked something….

What’s Missing

My photoblog, that is using the amazing Autofocus theme is simply that…a simple photoblog of some of my photos taken from any and everywhere.

I noticed something wasn’t right and I had one gripe about it…on single pages it lacked a bit of class and touch that I think photoblogs should have. Mainly I was looking for a previous/next thumbnail support when it displayed previous and next navigation links under the content. I thought that would be a perfect place to put these little gems.

By default, Autofocus theme puts the navigation to the previous and next posts underneath your content photo. Makes perfect sense, but I figured it’s a friggin photo blog, why not display the previous/next available photo too?

Boring Previous/Next


So tonight, I played with the Autofocus code a bit and produced what I had wanted.

  • Now when you go to an individual image page, you’ll see all the pertinent information about that photo, but underneath where the preview of the previous and next posts are, you’ll see those post’s thumbnail too.
  • The image shown is the thumbnail size setting which is 150X150 of the photo.
  • The previous post’s image auto floats left while the next post’s image floats to the right.

That’s about it, check it out on my photoblog and please give me some feedback or comment love. Might make that into a little plugin or something.


Zoomed Way Out to see the whole page
There, now doesn’t that look better?

Code Snippet

In the spirit of sharing, I’ll just go ahead and list the code snippet I used in the “single.php” in the Autofocus theme folder. Please note, this is just the navigation section below the current post.

$previouspost = get_previous_post($in_same_cat, $excluded_categories);

if ($previouspost != null) {
  echo '<div class="nav-previous">';
  previous_post_link('%link « Previous');
  echo '<div class="nav-excerpt"><p>';

  /* Show previous Post's Thumbnail */
  $tq_previouspost_img = get_post_meta($previouspost->ID, "image_url", $single = true);
  $tq_previouspost_title = get_post($previouspost->ID);
  $tq_previouspost_title = $tq_previouspost_title->post_title;
  echo '<img class="alignleft size-thumbnail" src="' . $tq_previouspost_img . '" alt="' . $tq_previouspost_title . '" width="150" height="150" />';
  /* End previous thumbnail */			

  echo '</p></div></div>';

$nextpost = get_next_post($in_same_cat, $excluded_categories);

if ($nextpost != null) {
echo '<div class="nav-next">';
next_post_link('Next » %link');
echo '<div class="nav-excerpt"><p>';

/* Show Next Post's Thumbnail */
$tq_nextpost_img = get_post_meta($nextpost->ID, "image_url", $single = true);
$tq_nextpost_title = get_post($nextpost->ID);
$tq_nextpost_title = $tq_nextpost_title->post_title;
echo '<img class="alignright size-thumbnail" src="' . $tq_nextpost_img . '" alt="' . $tq_nextpost_title . '" width="150" height="150" />';
/* End Next thumbnail */			

echo '</p></div></div>';

TQuizzle is my place to talk about whatever. I really don't post here much anymore what with all the other domains I own, but I'm putting it up on GitHub so that it can be seen for archive puposes.