How to: Get the Thumbnail of the First Image from the Post and Display it in WordPress

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

<?php echo catch_that_image() ?>

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

This should be it. I have tried and tested the above code on 4 different themes and it has worked in all of them. Maybe it will also work for other guys too. You may refer to my own site’s home page to check if this code is working or not.

You may also want to look out for 35+ Most Essential WordPress Tricks and Hacks

Any Mistakes???

If there are any errors in the above code please do specify them I would try to help you get the correct code.
ADIOS!!!!

Want to learn wordpress ? then head to 640-863 dumps for complete learning of web applications. Download 640-822 tutorial and 642-642 guide to learn how to add or remove objects in wordpress.

A total football nerd, he loves designing to the core and also likes to get his hands on some programming. He is the Co-Founder of ArtAtm. He hails from India. You may want to Follow Him On Twitter

Jitu – who has written posts on Artatm - Creative Art Magazine.


8 Responses to “How to: Get the Thumbnail of the First Image from the Post and Display it in WordPress”
  1. Iftekhar

    HI surely its a great idea. But there is a problem I m facing. Its the image size. You have mentioned 150×150. Suppose, I have only one image in my post and I have mentioned medium size for that image. So, no 150×150 size image will be saved in my upload folder. In this case, the post thumbnail will show the default image. Do you have any solution for this?
    Tanks.

  2. Rashmirekha Moharana

    Hi,

    I had used WPRECIPES code and it was running fine.
    Mention below are my codes.

    functions.php
    ————————
    function catch_that_image() {
    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)){ //Defines a default image
    $first_img = “/images/featured.jpg”;
    }
    return $first_img;
    }
    ————————
    home.php code to display the image
    —————————————
    have_posts()) : $wp_query->the_post(); { ?>

    <img src="” width=”290″ height=”145″ />
    <a href="”>

    <a href="”>Comments

    —————————————
    the above result shows the image and got resized to 290×145. Some images are not in the proportion so i had included your script to show that but failed.

    The above code did manage to show the image i.e. http://www.odileaks.com/wp-content/uploads/2012/05/Akash.jpg

    The moment i implement your code it does not shows the images that had been attached to the post.

    Your Code modified a bit to show the medium size media
    functions.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/featured.jpg”;
    }
    //Converts the link to the link of the thumbnail of that image
    $explodepoint = explode(“.”,$first_img);
    $count = count($explodepoint);
    $size = “-290×145″;
    $explodepoint[$count-2]= $explodepoint[$count-2].”".$size;
    $medium_img = implode(“.”,$explodepoint);
    echo $medium_img;
    }
    ——————————
    But here it shows the image /images/featured-290×145.jpg which is not there.

    Can you please tell me what wrong i had done to the code?

    Thanks a lot in advance.

  3. Anjan Phukan

    Hi, thanks, it’s very helpful. But I got a problem. What if the inserted image is not in full size? If a medium, large sized image is inserted in the post as the first image, how can we get the thumbnail image as mentioned above? Please help.

  4. Mahdi

    Just shows the text “/images/default-150×150.jpg” to me.
    my posts have images inside…

  5. Augustus Halperin

    one particular of the greatest website so far will bookmark it for later reading through

  6. Boyce Wipprecht

    Hey there, I searched for this website on Bing and just needed to say thanks for the superb study. I would have to concur with it, thank you again!

  7. Abhishek Sanghvi

    really useful tutorial.. thanx for sharing jitu

  8. wparena

    Well written and well explained

Leave a Reply