YARPP Template: Display Thumbnails by Automatically Grabbing the First Image in the Post

Generally All the YARPP templates designed for displaying thumbnail with related posts takes thumbnail image url from the custom field value of the post. I created a YARPP template which displays the thumbnail with the related posts by scanning the post and then automatically grabbing the first image attached to the post.

From a long time I wanted to display the thumbnail for the related posts on this blog but the custom field problem was restricting me from doing so. Its very difficult to go back to each and every post and set a custom field value for thumbnail image. So I created this template. Scroll below to ‘Related posts‘ to see the template in action.

This template will grab the first image of the post and then the image will be resized with the help of TimThumb script to the set thumbnail size.

Lets Begin the Procedure to Install the YARPP Thumbnail Template

1. First of all you’ll need to install the YARPP plugin to your WordPress installation.

2. Copy the following code snippet or download it from here (change its extension to .php) and save it in your theme folder:

<?php /*
Automatic Post Thumbnail Template
Author: Namit Gupta (www.theitechblog.com)
YARPP Template: Display Thumbnails by Automatically Grabbing the First Image in the Post

*/

?>
<p class="related-posts">Related Posts:</p>
<?php if ($related_query->have_posts()):?>
<ol class="related-posts">
<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
<?php
$default = ''; //default image url
$content = $post->post_content;
$output = preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches);
if ( $output > 0 )
$thumb = $matches[1][0];
else
$thumb = $default;
?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ($thumb != "") : ?>
<img src="<?php echo get_bloginfo('template_directory');?>/timthumb.php?src=<?php echo $thumb; ?>&amp;w=120&amp;h=120" alt="" />
<?php else : ?>
<img src="<?php echo get_bloginfo('template_directory');?>/timthumb.php?src=<?php echo $default; ?>&amp;w=120&amp;h=120" alt="" />
<?php endif; ?>
<?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ol>
<?php else: ?>
<p>No related posts found</p>
<?php endif; ?>

Following changes need to be made in the template file:

• Default Image url – enter the default image url which will be displayed in case a post does not have any image attached. enter the url inside the single quotes.
• Template by default will display the 120×120 px thumbnail. Change the width and height value in image src tag to change the thumbnail dimensions.

3. Add the following CSS to your theme’s style.css file for styling the Related Posts:

ol.related-posts {clear:both; text-align:center; margin:10px 0px 15px 0px; padding:0;}
ol.related-posts li{width:120px; float:left; display:inline; margin-right:15px; padding-right:12px; font-weight:bold;}
ol.related-posts img{clear:both; padding:5px; background:#F7F7F7; border:1px solid #DDD;}
ol.related-posts a{clear:both; display:block; border:none; text-decoration:none;}
ol.related-posts li{font-size:12px;}
p.related-posts{margin-top:20px; font-size:15px; font-weight:bold; color:#141414;}

4. Download timthumb.php from Google code and put it into your theme folder. Also create two folders ‘cache’ and ‘temp’ both need to have their file permissions set to 775. For more info checkout – Getting Started with TimThumb.

If images are on the same domain as the TimThumb script then its well and good. But if you need to use the external image from any other domain you need to open the timthumb.php file and edit ‘allowedSites array’ list. For more info checkout – Using TimThumb with External Website Images.

5. Goto the YARPP setting page and click on the custom template option and select the template file you just uploaded to your theme’s folder.

6. Paste the following code in your theme’s single.php where you want to display the related posts, or select the option to automatic display from the YARPP settings page.

<?php related_posts() ?>

And you are done! If everything done correctly your Single post pages will start displaying Related Posts with Automated Thumbnails.

Do let me know in the comments if you experience any problem while installing the template.