I spent a bunch of time trying to figure out how to retrieve the first image of a post. I found a bunch of articles with code samples and one plugin: Simple Image Grabber, WordPress Forum, Live Experience, WP Recipes, and Justin Tadlock. In nearly every set of comments, people were trying to figure out how to integrate the image retrieval code and Darren Hoyt’s TimThumb. Well, I’ve done it, and you can kype my code if you’d like.
This tutorial assumes that you’ve already got TimThumb installed on your site, that you know how to use it, and that it’s installed in your theme’s directory inside of the folder “scripts”.
The following code goes in your theme’s functions.php file. It is a modified version, taken from Smashing Magazine’s 10 Exceptional WordPress Hacks:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //Get the First Image
function catch_that_image() {
global $post, $posts;
$first_img = '';
$url = get_bloginfo('url');
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
$not_broken = @fopen("$first_img","r"); // checks if the image exists
if(empty($first_img) || !($not_broken)){ //Defines a default image
unset($first_img);
} else {
$first_img = str_replace($url, '', $first_img);
}
return $first_img;
} |
Now, open up your template to the page where you want timthumb to display the first image in the post. Cut and past the following:
1 2 3 | <?php $cti = catch_that_image(); if(isset($cti)){ ?>
<img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=<?php echo $cti; ?>&h=60&w=60&zc=1" alt="Link to <?php the_title(); ?>" class="thumbnail"/>
<?php } else {} ?> |
{ 2 trackbacks }
{ 13 comments… read them below or add one }
Great. Thanks….
Thanks for the info I’ve now tried your solution along with some of the others before finding your site. My page source seems to indicate the correct data is being parsed but there is still no image showing, can you help?
Hey Dan, I just took a quick glance at your code. Are you displaying images in your posts using custom fields?
Hello,
Your instructions are a little unclear to me:
Where u say:
#1.
it’s installed in your theme’s directory inside of the folder “scripts”.
I say:
#1
I thought it was a plugin? dont it go into the plugin directory I dont have a /script directory in my themes directory.. so i made one..
I assumed i needed to make a directory in my themes directory and put the timthumb.php there … so i did..
#2.
you Say:
Now, open up your template to the page where you want timthumb to display the first image in the post. Cut and past the following:
#2
I say
Question:
Open up my template?? dont u need to tell what file , or u talking a post?? how to open a template??, its not possible to open a template, a template is a collection of files ..
so can u say exactly what open a template is?
I know its in your mind as you type it and read it back but for somebody following your words exactly its not clear.
Thanks
Response to #1: Yes, you have to make a directory called scripts. timthumb isn’t really a plugin. I mean, if you want, you can put it in your plugin directory and make the appropriate changes to the code I’ve put together. But as it is now, it’s looking for timthumb.php in your template’s directory.
Response to #2: You’re right, A template is a collection of files. By open up the template, what I’m really saying is go to the “appearance” tab on the sidebar, and click on “editor”. This displays all of your template’s files. Go to the file that represents the place where you want the thumbnail to display (in most cases it will be the main index file). Then, in the section of the loop where you want to display the thumbnail, place the code snippet. And voila, a thumbnail of the appropriate size should display.
Will this work for images not uploaded through wordpress? ie: I use feedwordpress to pull and display posts from other site’s RSS feeds (with permission from the site owners of course). I would love to display the first image from thier post with an excerpt of the post on the front page.
I’ll be trying this solution of your tonight and let you know if it works out.
@Janice,
My guess is that it will not work. Because this uses TimThumb, and TimThumb has blocked the ability to shrink images from other people’s servers, it won’t work unless the images are hosted at your site. If you want it to work, I recommend getting your hands on an old version of TimThumb. That may solve the problem. But I can’t make any promises.
Thanks a million Josh! This script works fantastic! Thanks for sharing it ;-)
- Scott
Hey Scott. Glad it worked. Where are you using the script so we can all have a looksy?
I can’t seem to get it to work properly. Could I get some help?
Added the catch_that_image() to functions.php and created timthumb.php directly in my theme’s folder instead of in a sub-directory, which shouldn’t make a difference from what I understand, & edited the <img src=, taking out the /scripts/ part. My image source looks like this:
http://127.0.0.1/wordpress/wp-content/themes/TPSchools/timthumb.php?src=/wp-content/uploads/2010/01/IMG00046.jpg&h=150&w=150&zc=0
This is how it's supposed to look, I'm assuming. I checked my uploads folder and found the image CTI & timThumb created, so everything's working there. But, I'm still not getting any image to display.
Any ideas?
This was really helpful. Thanks a lot.
Hi Joshua,
I got it to work, but how would you specify the default image in the above code?
It’s not indicated as straightforward as on the SmashingMagazine example, I’ve tried different formatting possibilities and the functions page causes a white screen, due to my faulty formatting.
Could you show what the correct way would be?
Thanks in advance!
You put the default image into the in the following code.
<?php $cti = catch_that_image(); if(isset($cti)){ ?>
<img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=<?php echo $cti; ?>&h=60&w=60&zc=1" alt="Link to <?php the_title(); ?>" class="thumbnail"/>
<?php } else {} ?>
It would look something like <?php } else {?><img src="some image url"><?php } ?>