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() ?>
If you enjoyed this article, please consider sharing it!
Leave a Comment
Copyright © 2008 - 2012 WordPress Development by Jean-Baptiste Jung. Graphic art by GreenBubbles.org.ua, all right reserved.
17 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.
Trackbacks: