teaser image extracted from node body

Most of my story-type nodes have an image embedded within the node body -- I'm using tinyMCE for formatting, however I don't think this matters as far as this little hack goes. Essentially, I'm using code within my node template to check the node body for an image; if it finds one, it is displayed within the teaser. It's just a way to add a graphical element to the node teasers. The only time this doesn't work is if there is more than one image within the node; I don't know why this is.

Add this code to your node.tpl.php file:

<?php // find an image to display
if ($page == 0) {

$find= "/src=\"(.+?)\"/i";
$text2search= $pages[0];
preg_match($find, $text2search, $matches);
if ($matches[1]) {
	$imgttl = check_plain($title);
	$found_image = "<a href='$node_url'><img src='".$matches[1]."' style='float: left; padding: 5px;' alt='$imgttl' title='$imgttl'></a>";
}
else { $found_image = ""; }
}
?>

Alternatively, you can have a default $found_image that can be used if no image is found in the node. Just put the details in the else statement above.

Next, put the following code just before your $content variable

<?php if ($page == 0 && $found_image) { print $found_image; } ?>

At this point, the full-sized image will be displayed. In order to make it smaller, you can try just adding a width or height setting to the image tag, or use CSS much like I've done in this example.

Note that there are other options to get some sort of teaser image going, but these involve installing other modules. I was just looking for a simple way to accomplish the same thing.

Works in FF2.0, Opera 9.21 and IE6 -- although IE tries its best, it still gets a little confused and may not get the image proportion exactly correct.

Brad