Thursday, July 22, 2010

Thumbnails for Popular Posts

While working on the Latest Gadgets review blog I installed a plugin called 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 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 {
list-style:none outside none;

ul.wppp_list img {
border:2px solid #ECEFF5;

I hope that helps :)


jo555 said...

hi geoff !

I have a problem I don't know where place the code in my files, maybe you could help me? I thank you in advance

Anonymous said...

In the admin area, go to the Plugins tab and click Editor. Then in the window that loads, at the top right, select the popular posts plugin. You can then edit the file I mentioned in my post above. Be sure to change the ___PATH_TO_____ with an actual address to where you put the files! Thanks, Geoff.