Pull first image from wordpress to a slider problems - php

Question

I am trying to pull the first image from any new posts to my slider but having one hell of a time trying to get it to work right this is what I have so far
<div id="anicontainer">
<div id="aninav">
<ul>
<li id="featuredtab"> </li>
<li id="latesttab"> </li>
<li id="populartab"> </li>
</ul>
</div>
<!-- Sub Menus container. Do not remove -->
<div id="ani_inner">
<div id="featuredouter" class="innercontent">
<div id="featured" >
<ul class="ui-tabs-nav">
<?php
$ani_featured_slide = get_option('x12_featured_slide');
$my_query = new WP_Query("cat=".$ani_featured_slide."&showposts=5");
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li class="ui-tabs-nav-item" id="nav-fragment-<?php the_ID(); ?>"><img src="<?php bloginfo('template_url'); ?>/thumb.php?src=<?php echo catch_that_image() ?>&w=50&h=44&zc=1&q=100" alt="" /></li>
<?php endwhile; ?>
</ul>
<?php $my_query = new WP_Query("cat=".$ani_featured_slide."&showposts=5");
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<!-- Slide Content -->
<div id="fragment-<?php the_ID(); ?>" class="ui-tabs-panel" style="">
<img src="<?php bloginfo('template_url'); ?>/thumb.php?src=<?php echo catch_that_image() ?>&w=368&h=256&zc=1&q=100" alt="" />
<div class="info" >
<h2><?php the_title(); ?></h2>
<p><?php ani_content_limit(150, "Read More →"); ?></p>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<div id="latest" class="innercontent">
<?php $recent = new WP_Query("showposts=6"); while($recent->have_posts()) : $recent->the_post();?>
<div class="latestpost">
<?php if( get_post_meta($post->ID, "postimage", true) ): ?>
<img src="<?php bloginfo('template_url'); ?>/thumb.php?src=<?php echo catch_that_image() ?>&w=70&h=70&zc=1&q=100" class="latestpostimage" alt="<?php the_title(); ?>" />
<?php else: ?>
<img class="latestpostimage" src="<?php bloginfo('template_url'); ?>/images/postimage.png" alt="<?php the_title(); ?>" /><?php endif; ?><h2><?php the_title(); ?></h2>
<div class="shortstory">
<?php ani_content_limit(55, "Read More →"); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<div id="popular" class="innercontent">
<div id="populartags"><ul><li>
<?php wp_tag_cloud('smallest=9&largest=25&number=40'); ?>
</li>
</ul>
</div>
</div>
Any my function for grabbing the image is this
<?php 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];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}
?>
Am new to php most of this was from google :(
If anyone can see a problem it would mean alot to me cheers

Answer 1

Have you considered using WordPress featured images? It would be much easier to set up for what you are trying to achieve...
In your theme's functions.php file:
add_theme_support( 'post-thumbnails' ); // add theme support
add_image_size( 'slide', 368, 256, true ); // add an image size
See http://codex.wordpress.org/Function_Reference/add_theme_support and http://codex.wordpress.org/Function_Reference/add_image_size for more info on these
Then you would have inside the loop something like:
<?php if(has_post_thumbnail()) {
the_post_thumbnail( 'slide' );
} else {
// no image found
} ?>
More info on this can be found here: http://codex.wordpress.org/Function_Reference/has_post_thumbnail and here: http://codex.wordpress.org/Function_Reference/the_post_thumbnail