
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.

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
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?
I tried this and it only returned this text:
/images/default.jpg
Any ideas how to fix this?
This works fine until you into a post with a video like you tube and then it shows a broken link.
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.
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
How can I get more than just the first image?
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
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!
would it be difficult to implement timthumb with this function?
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/
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.
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.
@Daniel I owe you a million thanks. It works like a charm.
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
Thanks a lot! i’m using this script for the new template that i’m developing!
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?
MY Mistake – I meant clipping an image not caption.
Anyway this could work with pages? I want to get the first image of a specific page.
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?
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!
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,
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.
How to get the second, third, fourth and fifth image?
To get next image, just change $matches [1] [0]; to $matches [1] [1]; or $matches [1] [2]; and so on.
Does anyone know how to show the image as a particular size?
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
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?
@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;
}
}
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!
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?
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?
Very useful, thanks a lot!
Cool man i was looking for this. Thanks
Trackbacks: