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

64 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

May 16 2012 16:36

Hi there,

Thanks in advance. I did not view image. Only i view the image link. Not image. Any idea?

Jun 05 2012 13:53

Hi
So, I copied the larger block to functions.php.
Then where do I call it?, i.e. where do I put this line of code?

Thanks for any help provided.
Sorry if it is a dumb question :)

Jun 12 2012 14:08

Great!
Is there possibility to modify the first part of code to automatically enter and save the image in the wordpress media and then add it as Featured Image?
Thx

Jun 18 2012 09:06

hey; where to put the second code;

please anyone reply to me

Jun 20 2012 06:33

Nice, any idea for get the image when the post has only a gallery shortcode ([gallery link="file" orderby="rand" rows="3"]) in his content?

Jun 21 2012 10:56

Exactly what I was looking for …
Thank you

Jun 28 2012 16:01

hi,

how to put image path in first_img.. i using my path not working.. any php code include before the image path.

Jul 09 2012 23:38

How can I choose the thumbnail. for example I would like to get in the thumb the top of the pictures instead of the middle of it.

Aug 24 2012 04:15

I was hoping this would fix a problem I have but it doesn’t. Can anyone tell me what I could do to choose first image attached? Basically I have a site where there is a upload form for each post. Registered users can submit photos which ARE attached to the post. If I log in and look at the post it shows them all as ATTACHED.

When I use the above code it goes straight to the default backup IMG. Any suggestions for my scenario?

Sep 19 2012 16:48

Thanks for this tutorial! I’m actually going to be adapting it a bit to work on a non-WP site and to output thumbnails instead of the full image, but this is awesome. My first thought was to just use an explode function instead of preg, but I’m assuming the preg should be more efficient since it’s only storing the images it finds, rather than the entire group of text?

Oct 05 2012 18:28

Please help! I tried inserting this and have managed to break my site
:-< got a fatal error and want to cry :'(

Oct 08 2012 20:36

Thanks for this tutorial! I’m actually going to be adapting it a bit to work on a non-WP site and to output thumbnails instead of the full image, but this is awesome.

Oct 08 2012 20:56

Thanks for the function, it works pretty good.
Here is a code sample from my modified home page – It restricts the number of posts as well as orderby date.
8, 'order'=> 'DESC', 'orderby' => 'post_date' );
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post); ?>

<img class="recent-post-image" src=""/><a href=""> -

I also use Jquery to hide the default image.

Good luck!

Nov 04 2012 09:45

Thanks.
Can someone answer Michael’s question?

Nov 14 2012 18:58

Very usefull…but, the image is the thumbnail one ex: image-188×145.jpg, is it possible to get the full size image or to automaticly change the name with no -188×145

Exemple:

If name is -188×145.jpg than .jpg

Thanks

Dec 13 2012 20:06

Excellent bit of code. A real help. Thank you!

Jan 05 2013 08:48

Trying to modify a theme which used to display image only if it has featured image and not first image. This function seems interesting to me. Will try it at local host and once it truly works, I’ll upload the code to live site.
I’ll comeback later with success story or a question when it fail.

‘Arick

Jan 09 2013 18:30

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

Jan 09 2013 19:05

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.

Jan 09 2013 19:32

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;
}

Jan 10 2013 18:55

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;
}

Jan 15 2013 08:31

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

Jan 17 2013 03:45

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.

Jan 28 2013 17:43

Thanks for the function, It workes fine.

Feb 22 2013 20:41

Thank you, this is great!

Mar 08 2013 23:05

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

Mar 12 2013 14:52

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

Mar 27 2013 02:03

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 … ?

Mar 27 2013 11:57

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

Apr 03 2013 09:21

hello,

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

Apr 29 2013 13:27

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

Trackbacks:

Leave a Comment

* Name, Email, Comment are Required

WP Theme of the week

Sponsored Likebox