20.03.2011 in Home > Internet > WordPress by Namit Gupta

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.

related posts with thumbnail

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)

http://theitechblog.com/1448/yarpp-template-display-thumbnail-automatically-grabbing-first-image-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.

  • http://sumtips.com Renji

    Will this work with external images?

  • http://sumtips.com Renji

    Ok… got it now.. thanks for this… :)

  • http://www.webfroze.com Mukundan Srinivasan

    Yarpp is the best one for related posts. For all my freelancing theme designing i use yarpp as it is the most customizable one. Soon have to make a post on it. Well written. Thanks for those codings. I need it.

    • http://theitechblog.com/ Namit Gupta

      Hello Mukundan, Happy to know that you found the article useful. :-)

  • Renee

    HI there! Thanks for this great post. I have been searching for awhile but not found the answer, I hope you can help me.

    How do I style the “Related Posts” text? It’s by default in Arial font, but I would like to change the font to Times New Roman in CSS.

    CAn anyone help? :) Thanks so much!

    • http://theitechblog.com/ Namit Gupta

      If you are using my code, add font-family:"Times New Roman"; to the last line of CSS code p.related-posts{ //put the code here }

  • http://www.zanedickens.com/ Zane Dickens

    You’re awesome. This is awesome. Thanks for sharing.

    I was facing the prospect of having to retroactively add custom fields to all my posts to get another version of this to work. So scouring the wonderful world wide web. Stumbled across this awesome tut.

    Problem solved. Once again thanks for sharing.

  • http://www.xlurbanmedia.com/ rasheed

    Is there a way you can set yarpp to get the thumbnail version of the image. I have yarpp images working properly on my sit but it using the full image instead of the thumbnail version image. I have my thumbnails set to 150X150 which would greatly reduce the load time for each of my post since they are on every post. If anyone could help me out I would greatly appreciate it.

    • http://theitechblog.com/ Namit Gupta

      The code mentioned in the article uses timthumb script for re-sizing the images to the required size. If you are using the above code then there should be no such problem as you have mentioned. However this may be because you haven’t properly installed the timthumb script, in that case refer to point no. 4 in the article. Let us know if you have any further queries.

  • http://www.accidiosav.com Valeria

    I’m having a problem with the default image, which is not showing.. what could the problem be?

    • http://theitechblog.com/ Namit Gupta

      Keep the default image in JPG or PNG format. As timthumb script which is used to re-size the images, supports those two formats very well. It may not support other formats.

  • http://www.romantic-holidays.net Nicolas

    Amazing tweak! Great job! Many thanks. One question though. How would it be possible to limit the number of related posts shown?

    • http://theitechblog.com/ Namit Gupta

      Thanks Nicolas, Glad you liked it. You can adjust the number of related posts to be shown by adjusting the value of “Maximum number of related posts” field at YARRP settings page under WP Dashboard. Let us know if you have any further queries.

      • http://www.romantic-holidays.net Nicolas

        Oh right, of course! Thanks!

  • Egor

    Thank you for your instruction! its really useful! in google.ru there were not any information, .com cool!)

  • http://www.techyard.net Avinash

    Hi Namit,

    The template worked fine , but after the recent YARPP 3.4 updates the first image is not getting displayed but only the default image is getting displayed .. is there any change in the template required after the YARPP 3.4 update ??

  • venkat

    How to display related posts when we set custom field for a post.

  • Flo

    Hi there! Thanks for the nice script. Can we make this working using the Featured image?

  • Jay

    Awesome work.