How to get thumbnail from post attachment in this loop

Question

I use this code to display Most popular posts based on view count, but I dont have images in post content I have all images attached to post via attachment (gallery)

How to replace this "thimthumb" thumbnail with first attachment of this listed posts?

<div id="popular" class="widgets">
            <?php _e('<h2>Popular</h2>','iphoto');?>
            <ul>
            <?php
            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $args = array(
                'meta_key' => 'views',
                'orderby'   => 'meta_value_num',
                'paged' => $paged,
                'order' => DESC,
                'showposts' => 9
            );
            query_posts($args);
                while (have_posts()) : the_post();
                $output = preg_match('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $imgs); 
                $cnt = count($imgs);
            ?>
            <li>
            <?php if ( $cnt > 0 ) {  ?>
            <a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo '<img src="'.get_bloginfo('template_url').'/timthumb.php?src='.$imgs[1].'&amp;w=60&amp;h=60&amp;zc=1" />';?></a>
            <?php } else {  ?>
            <a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img alt="<?php the_title(); ?>" src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php bloginfo('template_url'); ?>/images/default.jpg&amp;w=60&amp;h=60&amp;zc=1" /></a>
            <?php } ?>
            </li>
            <?php endwhile; wp_reset_query(); ?>
            </ul>
            <div class="clear"></div>

Answer 1

You must fetch all the attachments via get_posts and then style as you want. See the example in page that I've linked.

UPDATE: You must substitute your code with this:

     <?php if ( $cnt > 0 ) {  ?>
                <a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo '<img src="'.get_bloginfo('template_url').'/timthumb.php?src='.$imgs[1].'&amp;w=60&amp;h=60&amp;zc=1" />';?></a>
                <?php } else {  ?>
                      <? $args = array( 'post_type' => 'attachment', 'numberposts' => 1, 'post_status' => null, 'post_parent' => $post->ID ); 
                       $attachments = get_posts($args);
                       if ($attachments) {
                         foreach ( $attachments as $attachment ) {
                       ?>
                         <a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php   the_title(); ?>">
                         <?php echo '<img src="'.get_bloginfo('template_url').'/timthumb.php?src='.<?  wp_get_attachment_url( $attachment->ID );.'&amp;w=60&amp;h=60&amp;zc=1" />';?></a>
                        <?    
                        }
                       }
                 } ?>

and yes, for every post you do addtionals query. To mitigate your problem you can use transient or a DB Caching plugin / Caching plugin

Answer 2

If I understand your question correctly, you want to retrieve the first attached image to each post & use the thumbnail size, rather than parsing the content for embedded images & using timthumb?

If so, set your thumbnail size to the required size (60x60) in the media options page, make sure you've drag n dropped the attachments into the required order, then use the following code (note that I'm not a fan of query_posts, I much prefer using get_posts).

$args = array(
        'meta_key'       => 'views',
        'orderby'        => 'meta_value_num',
        'order'          => 'DESC',
        'posts_per_page' => 9
    );

$popular_posts = get_posts( $args );

if ( $popular_posts ) {

    echo '<h2>Popular Posts</h2>';
    echo '<ul>';

    foreach ( $popular_posts as $popular_post ) {

        $kids_args = array(
                'post_parent'    => $popular_post->ID,
                'post_type'      => 'attachment',
                'post_status'    => null,
                'post_mime_type' => 'image',
                'orderby'        => 'menu_order',
                'order'          => 'ASC',
                'posts_per_page' => 1
                );

        $kids = get_posts( $kids_args );

        echo '<li>';
        if ( $kids ) {
            foreach ( $kids as $kid ) {
                $img = wp_get_attachment_image_src( $kid->ID );
                printf( '<a href="%s" title="%s"><img src="%s" width="%s" height="%s"></a>',
                    get_permalink( $popular_post->ID ),
                    esc_attr( get_the_title( $popular_post->ID ) ),
                    $img[0],
                    $img[1],
                    $img[2]
                    );
            }
        } else {
            printf( '<a href="%s" title="%s"><img src="%s" width="%s" height="%s"></a>',
                get_permalink( $popular_post->ID ),
                esc_attr( get_the_title( $popular_post->ID ) ),
                get_bloginfo( 'template_url' ) . '/images/default.jpg',
                60,
                60
                );
        }
        echo '</li>';

    }

    echo '</ul>';

}

I'm writing from memory, not in a position to test it now, so hopefully it works!