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!):
/**Then I edited the wordpresscom-popular-posts/wppp.php file. First find this code:
* 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;
}
// Replace format with dataThen add this code after, editing the paths as necessary:
$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'] )
);
// thumbnailThen 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.
$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 . '&w=80&h=40&zc=1';
}
$replace['%post_thumb%'] = '<img src="' . $imgpath . '" alt="'. $title .'" />';
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 :)
2 comments:
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
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.
Post a Comment