DISCLAIMER: this post is older than one year and may not be up to date with latest WordPress version.

Most WordPress users are using custom fields to display thumbs on their blog homepage. It is a good idea, but do you know that with a simple php function, you can grab the first image from the post, and display it. Just read on.

First, paste this function on your functions.php file.

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

Once done, you can simply call the function within the loop to display the first image from the post:

<?php echo catch_that_image() ?>

72 Comments

  1. Chris Bohman

    I found that this works wonderfully when used inside the loop, however when I tried to catch_that_image() on a specific post (e.g. catch_that_image($some_post_id)) I was out of luck. It’s obvious that the code doesn’t support such functionality so I thought I’d post my revision.

    function catch_that_image_oustide_loop($some_id) {
    $fetch_content = get_post($some_id);
    $content_to_search_through = $fetch_content->post_content;
    $first_img = ”;
    ob_start();
    ob_end_clean();
    $output = preg_match_all(‘//i’, $content_to_search_through, $matches);
    $first_img = $matches[1][0];

    if(empty($first_img)) {
    $first_img = “”;
    }
    return $first_img;
    }// Catch that image outside the loop

  2. Chris Bohman

    Danny and/or Michael,
    this function returns a url or relative directory (e.g. /wp-content/uploads/13/01/09/example-img.png) so if you were to get more than one image, it would change how you use the output.

    if you use this as intended

    two images in that src will cause problems so we don’t want to have the function output $matches[1][0] and $matches[1][1] and $matches[1][2]. Nor do we want to lop through that array getting all of the results.

    We can pass a variable into the function denoting which image to get (see below)

    function catch_that_image($which_image = 0) {
    global $post, $posts;
    $first_img = ”;
    ob_start();
    ob_end_clean();
    $output = preg_match_all(‘//i’, $post->post_content, $matches);
    $first_img = $matches [1] [$which_image];

    if(empty($first_img)){ //Defines a default image
    $first_img = “/images/default.jpg”;
    }
    return $first_img;
    }

    Then when using the function simply add the image number into the function, and then you can get as many images as you want, this way.

    and so on.. and so on.. You get the idea. I would suggest using this method however I have not tested it myself

    if you need to catch all the images regardless of how many there are, try:

    function catch_all_those_images() {
    global $post, $posts;
    $first_img = ”;
    ob_start();
    ob_end_clean();
    $output = preg_match_all(‘//i’, $post->post_content, $matches);

    return $matches;
    }

    foreach($matches[1] as $image_src){
    echo “”
    }

    And when you need to use the function, don’t put it inside of the src attribute just “catch_all_those_images()”

    Again, not tested.

  3. Chris Bohman

    I tested the solution I gave for Danny and/or Michael, worked like a charm. The only change I would make is to offset the image number so that you can put 1 in for the first image instead of zero. Like so..


    function catch_that_image($which_image = 1) {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('//i', $post->post_content, $matches);
    $first_img = $matches[1][$which_image-1];
    if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
    }
    return $first_img;
    }

  4. Chris Bohman

    Edit Post maybe?
    I killed the preg_match_all function somehow.


    function catch_that_image($which_image = 1) {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('//i', $post->post_content, $matches);
    $first_img = $matches[1][$which_image-1];
    if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
    }
    return $first_img;
    }

  5. gautam kumar

    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/default.jpg”;
    }
    return $first_img;
    }

    i use this its work properly …….but how can manage image size ……plz help me

  6. The function returns the last image found. To get the first, use /U at the end of the regular expression instead of /i. Also, the url will be in $matches[1] not in $matches[1][0]. This way it will stop at the first result found.

  7. Thanks for the function, It workes fine.

  8. Thank you, this is great!

  9. Does anyone know how to re-write this for phpbb?

  10. Hi, can anyoe tell me how to get the second image from my post, i have searched about it alot but didn’t find an appropriate solution
    Thanks

  11. There’s a problem with the default image path with pretty permalinks. If you’re logged-in and deliberately view a post that has no image, that’s fine in the loop, it’ll show the default image, but if you see it in a category listing, it will return a 404 since the path is like ~/category/images/default.jpg.

    How to overcome this … ?

  12. The default image path won’t work for category or search listings with pretty permalinks turned on!

  13. hello,

    is it possible to catch images between [img][/img] too?
    i need to regex for both html and bbcode tag

  14. Hey, it’s possible to grab the medium size image?

    This function only gets the original image, I would like to get the medium one.

    Cheers,

    Telmo

  15. hi guys , i used this code in my theme but its just showing the url of the image what should id do?

  16. me too.. For me it returns the URL rather than the image.
    Any ideas?

  17. If you’re getting the URL rather than the image it’s because you didn’t put the HTML image tag inside your template.

    Go to your template where you want to output the image and add something like:

    <a href="”><img class="alignleft size-full" src="” alt=””>

    The issue I’m having is that if the post already has an image at the top, it’s doubling up both of the images since it’s the first image already. It ends up showing both at the same time and looks like crap.

  18. Could you please explain how could I modify the piece of code so that I can choose different images for different categories in case if there is no first image present in the post?

  19. HI there,

    I am not a programmer, just wondering how to actually change this code so that it will display the post images from a certain category and also provide a pagination below the result.

    THank you so much!!!!

  20. Hi

    Thank you for this function.
    I’m trying to implement it in my blog but I got an issue: I got my pics not in my server but in photobucket so this linecodes just show the image URL.
    Is it possible to fix it in order to show the first pic of every post?

    Thank you

Leave a Comment

Your email address will not be published. Required fields are marked *