Thumbnails for WordPress.com Popular Posts

While working on the Latest Gadgets review blog I installed a plugin called WordPress.com Popular Posts which uses stats collected from your blog to work out the most frequently viewed stories during a time frame of your choice. The installation is very easy and customizing the plugin can be done via the widgets page. However I felt it was missing something: thumbnails!

On the site I was working on we use the first image in a post as the source image for our thumbnails and use the timthumb.php function to dynamically resize them. I found this blog posting which described how to create thumbnails for an alternative "popular posts" plugin. With a bit of hacking at the code provided there I was able to get thumbnails for the WordPress.com Popular Posts plugin.

So, with thanks to the aforementioned blog, here is a record of what I did for future reference (and for the benefit of anyone searching for a similar solution).

You need to download and install timthumb.php if your theme doesn't currently use it. Then I used the code provided here and added it to my theme's functions.php file (sorry, Blogger isn't good at showing code, so no indentation!):

/**
* Capture the first image from the post.
* @global object $post
* @global object $posts
* @return string
*/
function theme_function_capture_first_image($p=null) {
$firstImg = '';
if (empty($p)) {
global $post, $posts;
$firstImg = '';
ob_start(); ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$firstImg = $matches[1][0];
} else {
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $p->post_content, $matches);
$firstImg = $matches[1][0];
}
return $firstImg;
}

Then I edited the wordpresscom-popular-posts/wppp.php file. First find this code:

// Replace format with data
$replace = array(
'%post_permalink%' => get_permalink( $post['post_id'] ),
'%post_title%' => esc_html( $this->truncateText( $post['post_title'], $instance['title_length'] ) ),
'%post_title_attribute%' => esc_attr( $post['post_title'] ),
'%post_views%' => number_format_i18n( $post['views'] )
);

Then add this code after, editing the paths as necessary:

// thumbnail
$img = theme_function_capture_first_image(get_post($post['post_id']));
$src = get_permalink($post['post_id']);
$imgpath = '';
if (empty($img)) {
// define path to default thumbnail
$imgpath = 'http://___PATH_TO___/default.gif';
} else {
// define path to timthumb.php
$imgpath = 'http://___PATH_TO___/timthumb.php?' . 'src=' . $img . '&amp;w=80&amp;h=40&amp;zc=1';
}
$replace['%post_thumb%'] = '<img src="' . $imgpath . '" alt="'. $title .'" />';

Then you can use %post_thumb% in your formatting options (controlled in the widget). If you want to change the image size then edit the w=80 and h=40 in code above.

You might also want to add some CSS lines to your themes CSS file to make it look pretty, I used the following:

ul.wppp_list li {
min-height:45px;
display:block;
list-style:none outside none;
}

ul.wppp_list img {
float:left;
margin-right:8px;
width:80px;
height:40px;
border:2px solid #ECEFF5;
}

I hope that helps :)