I’ve recently chanced upon an article that inspired me greatly. The article is basically adding thumbnails to the related posts instead of just having the text link itself. Well, who would have actually thought of that? This idea has never ever crossed my mind before. We know of how Youtube uses thumbnails for related video but perhaps it is necessary since it is concerning videos. Never did I thought of actually putting thumbnails beside related posts in blogs and websites. I don’t know why but I’ve to actually emphasize that point over and over again. Because it is so simple, mundane and that we’ve seen it applied in various other types of sites etc, but why not in blogs?
A picture tells a thousand word. It draws attention, creates interest and of course allows readers to visualize much better. I’ve known about Google Adsense’s rules of not having images beside their advertisements. However, what I didn’t know was that the ban was due to those images resulted in making many people decide to click the advertisement. Yes, to think of it, I did once click on some advertisements due to the pictures beside it (totally unrelated pictures actually). So to put these thumbnails together with your awesome titles, wouldn’t that generate a surge of interest within the reader?
The original idea, code etc all belong to this site:
The original article:
Display Thumbnails for Related Posts in WordPress
With that said, this post is actually to help some people out who wanted some kind of modification to the modification. Basically the idea and code given in the article above (buildinternet) requires the blog owners to use a custom field. That, is very troublesome for it simply meant that every single article you have to fill in one more extra blank. For those bloggers who actually have been doing so (due to their theme and whatnots), it is completely fine. However, what about those bloggers that never does such things? Would it mean that they have to go back to the mountains of articles they have written long ago to add in the custom field? It would be extremely taxing and time wasting.
With me and many other bloggers falling into that category, we wanted the process to be automated. Yes, after I read the article I immediately went tweaking the code to try emulate the automated process I wanted. I ain’t a professional coder nor do I actually have little knowledge in coding (PHP in this case), but a little research and some testing does wonders.
This whole modification is based on the plugin called “Yet Another Related Post Plugin” (YARPP). Without that, you cannot proceed any further.
Without further ado, the modification to the modification (largely based on the code on buildinternet):
Download the YARPP Plugin
As said earlier, the modification we are about to do is based on the plugin itself. Download the plugin else you have to create a whole related post plugin yourself which this guide have no use helping at all.
Download TimThumb
TimThumb is required to create the necessary thumbnails etc for the related posts. Download it and upload it into your website. For me, I’ve placed the script itself into a folder called “scripts” in my theme folder.
Create a Template File
Upon successful installation of the plugin, you will realise that it allows a template system for displaying the different related posts. You can look through the different examples they provided and it might just give you more inspiration for better stuff.
For now, create a file named “yarrp-template-anythingyouwant.php” in the root of your theme folder. So basically if you’re using a theme called “whatever”, it would be in “/wordpress/wp-content/themes/whatever”. In this file, it will basically contain the structure of how the related posts are displayed.
Other articles that might interest you
have_posts()):?>
have_posts()) : $related_query->the_post(); ?>
ID;
$the_content =$wpdb->get_var("SELECT post_content FROM $wpdb->posts WHERE ID = $id");
$pattern = '!
; ?>/scripts/timthumb.php?src=<?php echo $firstimage_src; ?>&w=150&h=90&zc=1&q=100)
No related posts found
What the code simply does is if related posts exists, it will go through each content of the related posts and select the first image it sees. TimThumb then creates the necessary thumbnails and resize accordingly.
What you must need to edit are lines:
20: Change according to where your script is, leave the <?php echo $firstimage_src; ?> in place and lastly edit the width and height of the image that is generated. w for width, and h for height. The ZC and Q are stuff that you do not really need to temper with. You can read up at TimThumb’s website on what they actually does etc.
25: Image when no first images are found in the content. Basically the default images to put in should there not be any at all in the article.
This code is just an example of how it the modification actually works. You can change edit and modify to suit your own needs.
Customize Modification with CSS
The CSS is taken directly from buildinternet, all credits to them. Edit to suit your own needs as well.
/* Related Posts */
div.related-posts {clear:both; text-align:center; margin:10px 0px 0px 0px; padding:0;}
div.related-posts li{width:150px; float:left; display:inline; margin-right:15px;; padding:0;}
div.related-posts img{clear:both; padding:5px; background:#F7F7F7; border:1px solid #DDD;}
div.related-posts a{clear:both; display:block; border:none; text-decoration:none;}
div.related-posts li{font-size:12px;}
Activate the New Template
Go into the YARPP options page and under Display Options, check the box of Display using a custom template file. Select “yarpp-template-whateveryouwant.php” from the list. Save changes.
See and do necessary adjustments
Refresh your pages and adjust the template accordingly. For more fancy designs and stuff, you’ve to figure that out yourself.
CREDITS TO:
BuildInternet
http://wordpress.org/support/topic/246893
Nice!
Sadly it bugs when using a gallery…
it can grab images from a gallery.
Still it’s nice =)
If you’re using galleries like NextGen etc, I dont think it can actually grab the image since the tags for the nextgen gallery images are different than that of the code. You could try however, to edit the $pattern variable to find the first image of the gallery. Not sure if it works though.
Using the default gallery.
I guess its the same, since the gallery process the images in a different way instead of the string of “<img src". If thats the case, the only thing you can do is perhaps placed an image not in gallery mode, and it will pick it up. Else you have to find a way grabbing the first image from the gallery which I do not have much knowledge of how to go around doing so. I ain't a php coder or anything, heh so sorry can't help much for that.
no problem.
there is also an error in the else btw.
if i find a solution i’ll post it for you.
Correction, nothing wrong with the “else”
If the first image is an image loading from elsewhere, it’ll bug.
Just something to thing of when writing articles =)
I guess to actually ensure that a thumbnail is present. You could add another code where it starts checking whether a custom field is present, it will use the custom field else it will search for the first image should there be any.
Yeah keep me updated should you have any other progress in perfecting it.
Found some code: http://wordpress.org/support/topic/223646
Might help, trying to get it to work
I started my search for a related thumbnails script at http://buildinternet.com/2009/07/display-thumbnails-for-related-posts-in-wordpress/ though I didn’t want to have manually created a custom field (for thumbnail) for every post. Instead I needed a script to grab the first image in each post then with TimThumb create a thunb on the fly… viola! I found this great post via a “related posts” at http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/. You see, this related posts stuff really does work!!
Thanks!
Glad that you enjoyed the mini modification like I did!
modification worked like a charm
glad that it is working great for you =)
Awesome. Works like a charm. Such a nice alternative to using Linkwithin (which links back to their site for each link and has crawling issues).
Genius! Thank you!
You might want to take a look at a plugin thats available already that serves the same purpose. And you’re welcome.
Thank you so much – I saw the same article you did and came to the same conclusions, but didn’t know how to code the YARPP template. Thanks to you, it worked like a charm. Fabulous work! 🙂
If I remembered correctly there is a plugin released for such a purpose already. You might want to look into that.
But in any case no problem, you’re very welcome.
Aweome post! I’ve almost got it all together, but having one tiny issue.
Any idea how I fix that things on the second line are get knocked down by the extra line of text in the title?
http://ballguide.peasyphotos.com/venues/the-hilton-nottingham
–Rob
I had that problem and since I ain’t no coding expert or anything, I had to ask for help.
A person told me that I could actually use a float attribute or something on the images or so, I tried that but it didn’t work for me. Instead, I specified a specific height for each of the box in the styling of the thumbnails. This however is a temp solution and should the title be really really long, the same thing might happen again. (I suggest you ask around in some other forums and if you do get the solution please do tell me =) ).
Anyways so instead of:
div.related-posts li{width:150px; float:left; display:inline; margin-right:15px;; padding:0;}You specify the height variable:
div.related-posts li{width:150px; height:200px; float:left; display:inline; margin-right:15px;; padding:0;}Hope this temporary solution helps.
I am still having issues getting this to work! :-/
I have done everything you have outlined and it is simply not working. Firstly, it is trying to show your thumbnail for everything (which isn’t even showing), and secondly I have a thumbnail for everything. :-/
my thumbnail? did you edit it to point to your own domain? You can’t simply just cut and paste the whole code and expect it to work.
Check that you have:
The Yet another related post plugin.
timthumb script uploaded.
changed all required settings mainly lines 19 & 24.
If you have any other questions please ask. you do have to edit the code given a little.
I did edit all of the code like you said but it still was not showing my thumbnails. I was able to get my default thumbnail to show for all related posts but like I said I edited the code and I still couldn’t get my thumbnails to show for every individual post. And I have a thumbnail for EVERY post. I am using the Gallery Pro theme with timthumb.
I have both plugins installed. And I did edit the code.
Here is an example of where one of my thumbnails is maybe this will help you see an extra step I have to take for some reason:
“http://shirtsays.com/wp-content/themes/gallerypro/timthumb/timthumb.php?src=http://shirtsays.com/wp-content/uploads/2010/02/hoveroards-water-snorg-tees-124×124.jpg&w=125&h=125%20&zc=1”
Thank you for your help.
why is there a spacing between h and zc?. Taking that away i get to see the image.
if you would like you can send me the code in a txt file or something via email through the contact page.
I will definitely send you an email with my coding later today, thanks so much for your help. I will probably be sending it to you sometime in 4-5 hours. 🙂 Thanks again!
Yeah, this is really weir:
http://shirtsays.com/tv-shirts/lost-shirts/lost-since-1977
It is showing the thumbnail of an image that ISN’T in the gallery for that post. It is just inserted in the post.
This is one of my only posts that work this way.
Every other post I have the post has its own gallery with one image. But it isn’t actually inserted into the post, it shows automatically.
Hope you have an answer for this, I am itching to have related posts with images.
Now that I am thinking about it, this theme has an auto thumbnailer. It renames the original image and adds -124×124 at the end of the file name. So red.jpg turn into red-124×124.jpg.
I think this is the issue.
It is pulling from the original src name which is wrong.
:-/ is there going to be way to fix this?
That might be the problem. I haven’t find a solution to fetch images within galleries yet.
I’ve replied to your email =) Hope it helps even if its a little.
So I am so happy to have found your tutorial. It was exactly what i was looking for. Sadly though, the CSS is just not working. Is the code in the article the same style elements you used for your YARPP on this site? I want the style, at least format in a grid or tabular list, but I can’t seem to shake the bullets and vertical listing. I am just don’t know how to format the individual list items that are created from a php script. Any thoughts would be helpful.
you might want to look at the original article and follow their css example. The css code I gave is what I used but isn’t optimized nor is it fully working I think. Oh I realized what was missing in the CSS example in my article, it is the height variable not being specified. I specified 200px for height under the:
div.related-posts li{width:150px; float:left; display:inline; margin-right:15px;; padding:0;}so instead of that above, you might want to try doing this below:
div.related-posts li{width:150px; height:200px; float:left; display:inline; margin-right:15px;; padding:0;}Awesome. I’ll try it out.
Ah Swift. So one problem solved and another to follow. Turns out I had a typo,
class="related=posts"so of course CSS was applying. Now I am just dealing with a huge gap between the heading and the actual links. I love computers!!! Thanks again for the great tutorial.Ah like I said in the post I ain’t a professional coder or so, So i doubt I’ll be able to help you on the new problem. I myself had problems and seeked help from other people. Glad that at least it is working now, time to fix your other problem!
I would love to know if you found the solution and got a perfectly working script. Do get back to me =)
Swift. Thanks again. So I finally solved that last puzzle piece. Basically I took the out the
clear:bothin the first line of the CSS that you posted, and voila the big formatting gap is gone. Everything else in your tutorial works perfect. Keep up the awesome work.You’re welcome =)
Some one refer me to this site and find this post what I need and now using this I can add thumbnail in my related post
Helllo
Firstly would like to thank you for the template file code it worked perfectly well with my theme. I was trying to get the thumbnails to show using archon digital’s code…but it never worked! Then I found ur code and it worked perfectly well! 🙂
Now I am facing one issue…sum of my posts dont show related posts…in spite of having the relevant tags n categories…i fiddled with the threshold…but no luck…wud u be able to help me out here? Wud really appreciate it:)
Hello
you have to check your YARPP settings and in your post within the admin panel (when editing post) see if there are any related post of any sorts.
The code listed in this article does nothing about checking for the relevancy and generating the related post so I can’t help you much on that.
I think a better place to ask would be the YARPP support forums either at the wordpress plugin place or their official website if they have one.
And you might want to take a look at the many related post thumbnail plugins that are widely available since before this article and after it. There are some that are not too bad I believe, never tried them though but good feedback from others.
To sum it up, sorry can’t help you much since I don’t know much about the YARPP code and how it generates the posts etc.
I just test this and it just shows Related posts under the post tile and nothing else.
No content, no sidebar, Just title and related posts under it.
Any idea why and how to fix it ?
Thanks.
By the way, by related posts I meant just the title saying related posts, but no related ones at all.
Post title
Related posts
And nothing else.
Any ideas ?