Post Pic

How to: Get the first image from the post and display it

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() ?>

33 Responses

Jul 21 2011 20:17

I use this function all the time on my sites, works great!
Do you know if there is a way to get the first img from a gallery?

Jul 22 2011 18:35

I tried this and it only returned this text:

/images/default.jpg

Any ideas how to fix this?

Jul 26 2011 07:39

This works fine until you into a post with a video like you tube and then it shows a broken link.

Jul 27 2011 21:37

How would you return the ‘medium’ size version of the image? Seems like you would have to change the “return” method of display…

Any ideas? Thanks.

Aug 07 2011 14:20

Since this question is being asked a lot; I edited the codex and added an example of how to get the first image associated with a post
http://codex.wordpress.org/Function_Reference/get_children#Show_the_first_image_associated_with_the_post

Aug 10 2011 05:57

How can I get more than just the first image?

Aug 18 2011 12:45

This works brilliantly except for the fact that when the code is in functions.php I cannot logon to the dashboard!

Any ideas???
Thanks
Vern

Aug 18 2011 15:32

Have partially answered my question! I am using this coding to extract the first image from a post to display on a webpage in my website (not a WordPress blog). So, instead of adding the php coding into the functions.php file in my theme, I have placed it in the php on my webpage.
RESULT!

Aug 31 2011 05:27

would it be difficult to implement timthumb with this function?

Sep 03 2011 13:08

Pierre, take a look at these two sites. this might help to get the requested image from your gallery.

http://blogjunkie.net/2011/06/custom-size-thumbnail-with-fallback#comment-836

http://johnford.is/programmatically-pull-attachments-from-wordpress-posts/

Nov 16 2011 07:19

Great you saved my day. Can you tell me how to apply WordPress default thumbnail size to the first image?. Right now I am re-sizing the image using css. This makes the first image looks distorted. But the featured image appears fine. Please help me out. thanks in advance.

Nov 16 2011 11:05

Hi logesh, take a look here:

// get the first image attached to the current post
function aldenta_get_post_image($size = ‘thumbnail’) {
global $post;

$photos = get_children( array(‘post_parent’ => $post->ID, ‘post_status’ => ‘inherit’, ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘order’ => ‘ASC’, ‘orderby’ => ‘menu_order ID’) );

if ($photos) {
$photo = array_shift($photos);
return wp_get_attachment_image($photo->ID, $size);
}

return false;
}

// the html tag for the first image or false if no image is found
$photo = aldenta_get_post_image();

// end

more about this you will find here:
http://johnford.is/programmatically-pull-attachments-from-wordpress-posts

hope that helped as it did for me.

Nov 23 2011 15:43

@Daniel I owe you a million thanks. It works like a charm. :)

Dec 18 2011 16:31

My theme (premium theme and purchased by themify) supports featured image but it creates another problems. If I don’t use featured image option in posts, homepage does not show images with the post meanwhile if I used featured post utility in post it shows single photo two times.

Can you help me how I can sort out this problem.

with thanks and regards,

Sunil

Jan 15 2012 17:31

Thanks a lot! i’m using this script for the new template that i’m developing!

Jan 24 2012 08:52

The code works fine but if you want to display the caption of the image?
Do you have any hint (something to add to the code) so it displays the central caption of the image rather than displaying thumbnail, full size or the distorted size?

Jan 24 2012 09:27

MY Mistake – I meant clipping an image not caption.

Jan 31 2012 17:06

Anyway this could work with pages? I want to get the first image of a specific page.

Feb 06 2012 17:01

Hi, Does Jean-Baptiste, or Daniel, or anyone know how to limit the posts population? Instead of getting the FIRST image of ANY post, getting a RANDOM image of specific posts only?!

I have “parent” posts with images on them (one of them I’d like to show, from x random posts) and “child” posts with images on them (which I don’t want to show).

I am not a php programmer. I thought maybe the line “global $post, $posts;” is the problem in my case? Instead I’d need a base population of posts that’s limited to my “parent” posts. One way to do this would be to use custom fields, and mark each “parent” post. But even IF I knew how to do that, I don’t know what the php code must look like? Can anyone help?

Feb 08 2012 04:51

Hello, any chance you can tell me how to pull this image to another php page that will be displaying multiple blogs. The page I’m pulling to is on the same domain.. just pulling multiple blogs to one index.php. Please help!

Feb 12 2012 04:51

Hi,

Does anyone know how I could use this in JS rather than PHP? I’m currently making an XML feed app using Phonegap and would like to bring back the first image to use as a thumbnail in my list. The feed is generated from posts on a WordPress site.

Thanks,

Feb 16 2012 11:17

Hello,
if you turn on the WP_Debug you will receive an Undefined offset 0 error on the line were this code 7 where this code is written : $first_img = $matches [1] [0];

is their any possible way to solve it, because my theme is not getting accepted in WordPress Respiratory because of that error.

Mar 05 2012 19:20

How to get the second, third, fourth and fifth image?

Mar 08 2012 16:11

To get next image, just change $matches [1] [0]; to $matches [1] [1]; or $matches [1] [2]; and so on.

Mar 11 2012 13:38

Does anyone know how to show the image as a particular size?

Mar 14 2012 06:38

Hi Daniel, really impressed with your efoort by helping all, thankss, i’ve a question too,

Now i’am having a Blog index page with latest posts only http://www.globalintegra.com/blog, i just want to include videos and photos in this blog index with setting minimum height to the post for videos and photos, after that i want continue reading as it placed now

Apr 18 2012 09:34

I have this in a page kind of like a small gallery but its limited due to:

Settings >> Reading >> Blog pages show at most

Is there a way around this to grab all images no matter what the limit is from settings?

Apr 18 2012 17:53

@Ritesh Sanap
try the following code it should solve the problem .


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

Apr 26 2012 02:40

As a few others asked, I only recently discovered this doesn’t apply to pages. Any chances there’s a way to make it apply to them as well? Much thanks to anyone who figures out how!

Apr 30 2012 21:29

Hi.

I love this and I’m implementing it in a theme I’m working on right now.
There is however one thing I’m missing. Is there a way to make the image clickable? So when I click the image. It will for example open the original image in lightbox? :)

May 01 2012 20:49

I use featured images on my website all the time. What I want to do is make it so the featured image doesn’t show up on the home page but only in the actual post. Any way to do this?

May 08 2012 19:55

Very useful, thanks a lot!

May 15 2012 15:31

Cool man i was looking for this. Thanks

Trackbacks:

Leave a Comment

* Name, Email, Comment are Required

WP Theme generator

Sponsored Likebox