Goodbye LinkWithin, Welcome YARPP

I’ve been using LinkWithin widget since my blog was using Blogger. It’s quite a cool widget where it shows a really related stories that appears under each blog post in a way that no other widget has done the same thing.

But, what makes me stop using it? Below are 2 of the main reasons why I’m seaching for alternatives.

• The widget appears heightless initially, where the related posts are being dynamically added to it. It’s quite disturbing when that happens, the page shifted down, and it you are reading something, you have to scroll down to go back to find the section that you are reading
• The posts displayed looks like they are being retrieved randomly, and not really related to the post that is currently being viewed

Just to illustrate my second point above, I was reading the post about the new iPhone 4 that I just bought. Below are the related posts returned from LinkWithin.

As you can see, it’s pretty random. Me having a new iPhone 4 and my guppy fish gave birth are obviously two very big different topics.

I want find the alternative widget that

• Shows real relevant posts base the one that is currently views
• Can mimic how the related posts are shown in LinkWithin (I like the layout of LinkWithin widget)
• Shows the thumbnail of the image found in the relevant posts

Showing related posts

There’s a really cool WordPress plugin for this. The one that has become the talk of everyone is Yet Another Related Posts Plugin (YARPP).

And what’s new since version 3.0, YARPP supports templating, which is just what I need for changing the way the related posts is shown, and to mimic the LinkWithin loon.

Mimicking LinkWithin widget look

There is also someone who has created a template to be used with YARPP that has LinkWithin look. Check out the LinkWithin-Inspired YARPP Template to know how to get started.

The problem with this template is it uses the thumbnail that is specified in the custom fields, which most of my posts don’t have. That’s really a hard work adding this information to every single post, and also is an additional work to do every time I write a new post of adding a thumbnail information.

Customizing to my own taste

I host the images that I use for my blog entry at Flickr. Usually, my blog post contains several of images. What I really want is

• The thumbnail of my post is taken from the images that I have in that blog post
• In case there are more than 1 image in the blog post, random pick one

The code below will do just this which needs to be added to the functions.php file of the template used. Line 4 will extract all the image sources, and place it in $matches array. Line 9 will randomly pick one.

function getImage() {
   global $post, $posts;
   srand((double)microtime()*1000000);
   $output = preg_match_all('/]*src=["|\']([^"|\']+)/i', $post->post_content, $matches);

   if (count($matches[1]) == 0)
      $random_img = "";
   else
      $random_img = $matches[1][array_rand($matches[1])];

   return $random_img;
}

Below is the modified YARPP template. Instead of getting the thumbnail URL from the thumbnail custom field of the post, the thumbnail URL is taken from the return of the getImage() function above.

 
You might also like:
have_posts()):?>

   have_posts()) : $related_query->the_post(); ?>
   

       
       
       
       
       
   


No related posts.

I tidied the CSS a bit to fit 5 related posts in the 500px width space. I’ve also added the highlighting when the mouse hovers on the related post block, just like how it works in the original LinkWithin widget.

ul.related-posts {
   width: 500px;
   float: left;
   list-style-type: none;
   margin: 0px;
   padding: 10px 0px 10px 0px !important;
}

.related-posts li {
   list-style-type: none;
   float: left;
   width: 86px;
   display: block;
   font-family: Arial;
   font-size: 12px;
   text-align: left;
   text-indent: 0px;
   padding: 5px 9px 5px 5px;
   margin: 0px !important;
}

.related-posts li:hover {
   background-color: #dde;
}

.related-posts li a, a:hover {
   color: #333;
   text-decoration: none;
}

.related-posts img {
   width: 86px;
   padding: 1px;
   border: 1px solid #CCC;
}

For the same blog entry that I mentioned at the beginning of this entry about my new iPhone 4, below is how the YARPP looks like. Now the related posts start to make sense.

YARPP only shows related posts when the entry is viewed in single view. If you are not viewing this entry in a single view (i.e. there are other blog entry in this page), go ahead click the permalink for this blog entry.