Retreive First Image From Post

westondeboer
(@poil11)

15 years, 1 month ago
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 http://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)

1 2 →

Thread Starter westondeboer
(@poil11)

15 years, 1 month ago

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.

artsaround
(@artsaround)

15 years, 1 month ago

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=http://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

nlex
(@nlex)

14 years, 11 months ago

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…)

nlex
(@nlex)

14 years, 11 months ago

What should i do to create a list of posts – as thumbs – of a specific category, using your method ?
Thread Starter westondeboer
(@poil11)

14 years, 11 months ago
```
<?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;?>
```
nlex
(@nlex)

14 years, 11 months ago

thanks a lot 🙂

royscheeren
(@royscheeren)

14 years, 11 months ago

I’m having the same problem as artsaround.

Any progress on this issue?

thanx
Thread Starter westondeboer
(@poil11)

14 years, 11 months ago
The code would be:
$first_img = str_replace('http://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('http://yourwebsite.com', '', $first_img);
return $first_img;
}
```
carlosbronze
(@carlosbronze)

14 years, 11 months ago

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?

quech
(@quech)

14 years, 11 months ago

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

henri
(@riri23)

14 years, 10 months ago

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
henri
(@riri23)

14 years, 10 months ago
I found… Errase /image/default.jpg inside the function code and put this code inside your loop
```
<?php if (catch_that_image()){ ?>

<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>
<?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?
jonnyburch
(@jonnyburch)

14 years, 10 months ago

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…
jonnyburch
(@jonnyburch)

14 years, 10 months ago
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;
}
```
Alkorr
(@alkorr)

14 years, 10 months ago

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!