YARPP Template with Post-Thumbnails

Related posts

This post will explain a sample of YARPP template implementation with post-thumbnails or featured images. With post-thumbnails, we’ll get more interesting appearance for displaying related posts because they’re not just text, but colorful images. YARPP works hard by giving us all related posts to a particular post, now it is our turn to make its output to become more beautiful so it is interesting enough for our readers to click on them and then read the related posts.

This post needs some knowledge from the following previous posts:

In the first post, I already presented the source code for the oh yeah YARPP template and the CSS behind it. I made post-thumbnail with its title placed over the thumbnail. I also made transparent background color for the title. The second post explains how to achieve those effects using CSS.

Here I present again the source code of YARPP template I made in the first post:

<?php if ($related_query->have_posts()):?>

<div class="yarpp-post-container">
   <h3>Related Posts</h3>
   <div class="yarpp-post-body">
   <?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
   <div class="yarpp-post">

      <?php $title = get_the_title(); $permalink = get_permalink(); ?>
      <a href="<?php echo $permalink; ?>" rel="bookmark">
         <?php if (has_post_thumbnail()): ?>
            <?php the_post_thumbnail( 'post-thumbnail', array( 'title' => $title, 'alt' => $title ) ); ?>

         <?php else : ?>
            <img src="<?php echo get_bloginfo('template_url') . 'images/no_thumbnail.jpg'; ?>" class="attachment-post-thumbnail" />
         <?php endif; ?>
      <div class="yarpp-title">&nbsp;</div>

      <div class="yarpp-link-container">
         <a href="<?php echo $permalink; ?>" title="<?php echo $title; ?>" rel="bookmark" class="yarpp-link">
            <?php echo $title; ?>

   <?php endwhile; ?>
<?php endif; ?>

Compared with original source code in the first post, there are some additions to the line of code. The purpose of these additions is for checking whether the post has post-thumbnail or not. If it has, the thumbnail image will be displayed. Otherwise, it will display ‘no-picture’ image from theme’s image directory. This is important because not all posts have post-thumbnail.

The source code works by retrieving related posts from YARPP table repository using YARPP objects and functions. Then it will display post title, its link, and its thumbnail image for each related post. The number of post to display can be configured from YARPP administration screen.

It is also important to perform checking at the start whether there is related posts or not. If no related posts, the code will not generate any HTML output. But of course you can change this behavior, so that when there is no related posts it will show a message telling the readers that there are no related posts.

Formatting Thumbnail

Now we will use the knowledge I explained in the second post to format the appearance of images in the YARPP template. I will use many terms from the second post, so if you haven’t read it, I suggest you to read it first in order to make it easier to follow my explanation.

First, as the container element is div which has the following class attribute definition: class="yarpp-post". The following code snippet shows the source code of yarpp-post CSS definition:

.yarpp-post {
   float: left;
   text-align: center;
   width: 168px;
   height: 170px;
   padding: 5px 5px 5px 5px;
   position: relative;

The most essential attribute is position. Refer to the second post, the relative value for this attribute will place any elements contained within this element -which has absolute positioning attribute- at a certain left and top position, measured relatively to this container element.

Next, as the overlay element is div which has the following class attribute definition: class: yarpp-title. The overlay element will create a transparent container for the caption or title of the image, with level of transparency equals to 60%. The following code snippet shows CSS definition for yarpp-title:

.yarpp-title {
   position: absolute;
   padding: 2px 5px;
   top: 119px;
   overflow: hidden;
   height: 40px;
   background: #000;
   opacity: 0.6;
   width: 140px;
   margin-left: 9px;

The position attribute needs to be made absolute because the text will be placed at the certain position ‘relative’ to the container. The absolute position will also made this overlay element placed on top its container at the certain exact position. The transparency level which is made 60% will make sure the image will be still visible although part of it is placed behind the overlay.

The title of the thumbnail is placed inside the div element with the following class attribute definition: yarpp-link-container:

.yarpp-link-container {
   position: absolute;
   padding: 2px 5px;
   top: 119px;
   overflow: hidden;
   height: 40px;
   width: 140px;
   margin-left: 9px;
   z-index: 1000;

The position attribute is also important to be made absolute, and its z-index attribute is also set to 1000 (big number) to ensure it is alway on top of other elements, especially the overlay. The overflow attribute is set to hidden so that any long text will be visually cut to the area of the div element.

By default, the title of the image will be filled with the title attribute of the image when we uploaded the image into media library. But we can change this default behavior by supplying the ‘title’ parameter when calling the_post_thumbnail() function. The ‘title’ parameter will be supplied with the title of the post. As addition, we can also supply the ‘alt’ parameter and give it the same value with title. The following code snippet shows the the_post_thumbnail() function call with parameters I mentioned above:

<?php the_post_thumbnail( 'post-thumbnail', array( 'title' => $title, 'alt' => $title ) ); ?>

Now our YARPP template should be ready to use. The template will display related posts as tidy thumbnail images. Each image is overlaid with post title, printed on top of transparent background and placed at the bottom of the image. You can see a sample result below:

Sample result of YARPP template with thumbnail image

Interested to implement it for your own blog? It should be easy. Good luck for trying!

Related Posts

The Importance of Featured Image in WordPress
Text with Transparent Background Over an Image using CSS
This entry was posted in WordPress and tagged .

7 Responses to YARPP Template with Post-Thumbnails

  1. Pit says:

    Great work!
    I really like how each image is overlaid with post title, and the transparency.


  2. Hello,

    I have tried your code but the thumbnails don’t appear…

    I use the first code in the yarpp template.
    Then, the three css classes in the style.css
    I have also added add_theme_support( ‘post-thumbnails’ ); to functions.php for activating thumbnails in wordpress.

    could you please help me with this???

    Thanks a lot and regards

  3. Mick says:

    Hi great plugin but it doesn’t work with Internet Explorer, try to watch this site with IE and you see what i say.

    Is there any solution?

    Thanks :)

    • Agus says:

      I’ve tried IE8, and this blog looks good in IE8 (except for the ’rounded’ border). In IE 7 it is broken. I’d like to fix it for IE7, but maybe not now. Somehow IE7 doesn’t understand CSS definition correctly the way other browsers understand it. IE9 is on the way, and soon IE7 will be a legacy browser.

  4. Lucky dc says:

    Hai, sir…. I have a trouble to apply all the codes because I dont know the basic how to use the php codes. Could you make another post with step by step completely with picture supported? Thank You ;-)

  5. I need a little help. I want to customize the title of YARPP which is showing for every blogpost.

    “Related Posts”

    I want to add a background color for this. How to do this?

About Me

I am a professional developer and designer for the following systems: WordPress, Magento, and OpenCart. You can hire me to do overseas works related to those systems.
Hire me | Donate / Payment | Testimonials

Recent Comments