Retreive First Image From Post

  • I have been looking around for this for ages. I have been using other post thumb plugins and just find them to bulky for what i wanted, too feature rich. I just wanted a basic grab the first image from a post and display it. Just add the below code to your functions.php file in your theme directory.

    // Get URL of first image in a post
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];

// no image found display default image instead
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}

    to call it just put <?php echo catch_that_image() ?> in your template file within the loop.

    I am using this in conjunction with https://code.google.com/p/timthumb to scale the image to what i want it to be. and i would just do

    <img src=”/thumb.php?src=<?php echo catch_that_image() ?>&w=200&zc=1&q=200″ alt=”<?php the_title(); ?>”/>

Viewing 15 replies - 1 through 15 (of 24 total)
  • Thread Starter westondeboer

    (@poil11)

    I want to thank Travel Junkie from Is this an exploit in Post Thumb Revisited?, for the lead.

    Anyone know how i can optimize this, I am no php expert, just know how to hack php to make it work for me.

    Hey poil11,

    I keep running into a problem using timthumb and I’d be interested to know how you solved it. As far as I can tell timthumb balks at accepting a complete url as the img src

    for example in a small test file I can get this to work:
    <img src=”timthumb.php?src=/wp-content/themes/ebc/no-image.gif&w=100&h=100&zc=1″ alt=”” />

    but not this:
    <img src=”timthumb.php?src=https://www.blahblah.com/wordpress/wp-content/themes/ebc/no-image.gif&w=100&h=100&zc=1″ alt=”” />

    Your functions.php script however passes a full url when it echo’s. Any suggestions, this has me stumped!

    Cheers

    Very interesting, thanks for sharing, is it possible to specifiy an image : i’m not interested to make something automatic in this : want to generate the thumb myself and just ‘link’ it to a post (my site is not a blog site…)

    What should i do to create a list of posts – as thumbs – of a specific category, using your method ?

    Thread Starter westondeboer

    (@poil11)

    <?php query_posts('category_name=special_cat&amp;showposts=10'); ?>

  <?php while (have_posts()) : the_post(); ?>
   <img src="/thumb.php?src=<?php echo catch_that_image() ?>&amp;w=200&amp;zc=1" alt="<?php the_title(); ?>"/>
  <?php endwhile;?>

    thanks a lot ??

    I’m having the same problem as artsaround.

    Any progress on this issue?

    thanx

    Thread Starter westondeboer

    (@poil11)

    The code would be:
    $first_img = str_replace('https://yourwebsite.com', '', $first_img);

    and you could just put it in there:

    // no image found display default image instead
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
$first_img = str_replace('https://yourwebsite.com', '', $first_img);
return $first_img;
}

    im getting my image thumbnail ive inserted in the post
    can i change it so i get the image’s link to the higher quality version?

    just wondering cause it doesn’t seem to work with galleries (if all the post images are within a gallery). has anyone tried that?

    Nice piece of code!

    If you want to not display a default image but nothing if there is no image inside the post?

    Thanks for your help

    I found… Errase /image/default.jpg inside the function code and put this code inside your loop

    <?php if (catch_that_image()){ ?>
<!-- Begin Thumb Container -->
<div class="postthumb">
              <a href="<?php the_permalink(); ?>">
               <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo catch_that_image() ?>&w=580&h=150&zc=1&q=100" alt="<?php the_title(); ?>"/>
              </a>
</div><!-- End Thumb Container -->
<?php }; ?>

    But there is a small bug in the code, the catch try to find not only jpg or png but also flash so it not display image. Is it possible to make a test on the filetype?

    I host my images externally (flickr) so cannot use timthumb – is there

    a) a different method of resizing that might work instead (the resizer in the ‘sideposts’ plugin works, maybe a hack on that?)

    or

    b) i wondered if there was a hack you could make on your (fantastic) catch_that_image function that would insert a ‘_t’ onto the name of the image before the ‘.jpg’ as thats the syntax flickr uses to generate a thumbnail. Even then it might not work, just an idea…

    a) a different method of resizing that might work instead (the resizer in the ‘sideposts’ plugin works, maybe a hack on that?)

    The function for which is 

    function _sposts_thumbnails( $excerpt )
{
	global $post;

	$settings = get_option('sideposts_widget');

	$images = get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
	if ( $images ) {
		$img = array();
		foreach( $images as $imageID => $imagePost ) {
			$img[] = wp_get_attachment_image_src($imageID);
		}
		$thumb = array_pop($img);

		$thumb_h = intval( (int) $settings['thumbnail'] * (int) $thumb[2] / (int) $thumb[1] );
		$excerpt = apply_filters(	'sideposts_thumbnail',
									'<img src="'. $thumb[0] .'" width="'. $settings['thumbnail'] .'" height="'. $thumb_h .'" class="alignleft" />')
				 . $excerpt;
	}

	return $excerpt;
}

    Great hack but I have a problem: I get the first image of the post displayed exactly where I want with this code, but below it when I call <?php the_content(); ?> I get the same image again…

    Any solution? Thanks!

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘Retreive First Image From Post’ is closed to new replies.