将第一张图像从wordpress拉到滑块问题

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"><a href="javascript:void(0);" rel="featuredouter"> </a></li>
    <li id="latesttab"><a href="javascript:void(0);" rel="latest"> </a></li>
    <li id="populartab"><a href="javascript:void(0);" rel="popular"> </a></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(); ?>"><a href="#fragment-<?php the_ID(); ?>"><img src="<?php bloginfo('template_url'); ?>/thumb.php?src=<?php echo catch_that_image() ?>&amp;w=50&amp;h=44&amp;zc=1&amp;q=100" alt="" /></a></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() ?>&amp;w=368&amp;h=256&amp;zc=1&amp;q=100" alt="" />
             <div class="info" >
                <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                <p><?php ani_content_limit(150, "Read More &rarr;"); ?></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) ): ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php bloginfo('template_url'); ?>/thumb.php?src=<?php echo catch_that_image() ?>&amp;w=70&amp;h=70&amp;zc=1&amp;q=100" class="latestpostimage" alt="<?php the_title(); ?>" /></a>
                <?php else: ?>
                    <a href="<?php the_permalink() ?>" rel="bookmark"><img class="latestpostimage" src="<?php bloginfo('template_url'); ?>/images/postimage.png" alt="<?php the_title(); ?>" /></a><?php endif; ?><h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                <div class="shortstory">
                <?php ani_content_limit(55, "Read More &rarr;"); ?>
                </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