Display First Picture Image URL from Post as a Thumbnail on the Frontpage on the fly WordPress

1 we download these thimthumb script
2. upload to our theme folder
3 we find functions.php in theme folder and put following code

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  $output = preg_match_all('/<img.+src=&#91;\'"&#93;(&#91;^\'"&#93;+)&#91;\'"&#93;.*>/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;


4 we put these code on our theme between loop (index.php or home.php)

<a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php echo catch_that_image() ?>&w=100&h=100&zc=1" alt="<?php the_title(); ?>"/></a>

5 we create default.jpg put inside images folder theme folder/images/default.jpg

thats all folk welldone

credit http://www.wprecipes.com/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s