While re-building my site there was one change that I needed to do specifically related to the home page and that was to display the thumbnail image instead of the bigger image that I was already using. I was using the code for getting the first image of the post and display it on the home page as given in the WPRECIPES.
Thus I sat out to find the code for displaying the thumbnail from my post images. I tried finding and using the codes that were available all over the net. I used almost 10-15 codes that were at the disposal for me but there was not even a single code that was working with my theme. Then I tried tweaking the codes as per myself. I tried and went as far as my knowledge took me but still the code was not ready to budge.
After a lot of unsuccessful work my friend, Chandan, gave a small hint on how the code could be written. That was the point when the logic struck me and I was able to write a very very simple code to display the thumbnails of the first image of the post on the home page.
This is how the logic goes
Almost all the wordpress themes, as a norm, save two thumbnail images along with the original image. In the wordpress admin section there is a Settings section which contains the Media section.
This is the area where you could specify the size of the thumbnails that you want the wordpress to automatically create. I then referred to the code of WPRECIPES that I was using. I rewrote the code to get the thumbnail image on my home page.
The Code
The following code gets the thumbnail of the first image of your post and then using this function it gets displayed on the home page. You need to copy and paste this code in your functions.php file
<?php
function catch_that_image()
{
//Gets the link to the first image of the post
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img))
{
$first_img = "/images/default.jpg";
}
//Converts the link to the link of the thumbnail of that image
$explodepoint = explode(".",$first_img);
$count = count($explodepoint);
$size = "-150x150";
$explodepoint[$count-2]= $explodepoint[$count-2]."".$size;
$thumb_img = implode(".",$explodepoint);
echo $thumb_img;
}
?>
Now just use the following code in your loop on the index page
What does the above code does???
The above code gets the first image of your post as stated in WPRECIPES and I have just exploded link of the image and then I have appended the size of the thumbnail image before the image type is specified. Then I have again imploded the link to get the link of the thumbnail of the first image of the post
$first_img saves the link of the first image of the post.
$explodepoint is an array saving the link which is exploded using the “.”
$count saves the size of the array $explodepoint
$size is saving the size of the thumbnail image that is specified in the Media section in the admin panel.
$thumb_img saves the link which is again imploded using the “.”
Example
Link of the first image of the post = http://artatm.com/wp-content/uploads/2010/09/example.png
Link after Exploding and Imploding = http://artatm.com/wp-content/uploads/2010/09/example-150×150.png