Getting first Image from post

Question

Hi I am following the instructions from this article and I cannot get it to work, it gives me a blank screen.

I think there is something wrong with the opening and closing php tags between the div "view view-first" and the div "mask". When I remove these tags I get the site is displayed again but instead of images the is php code displayed.

I did get the code to work briefly but now it is broken again.

Thanks for your help.

RT

<?php get_header(); ?>
<div >
     <?php query_posts(array('category__in' => array(5), 'posts_per_page' => 10000)); ?>
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>



                    <?php $currentid = get_the_id(); ?>



                    <div class="grid-box grid-block mod-box width33">

                        <div class="view view-first">   
                                   <?php           
                                   if ( get_the_post_thumbnail($post_id) != '' ) {

                                      echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
                                      the_post_thumbnail(array(300,600));
                                      echo '</a>';

                                    } else {

                                     echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
                                     echo '<img src="';
                                     echo catch_that_image(array(300,600));
                                     echo '" alt="" />';
                                     echo '</a>';

                                    }

                                 wp_reset_query();
                                ?> 

                            <div class="mask">  
                                <h2><a href="<?php the_permalink(); ?>"><?php echo get_the_title($currentid); ?></a></h2>
                                <p><?php echo get_the_excerpt( $post->parent ); ?></p>
                                <a href="<?php the_permalink(); ?>" class="info">Read More...</a>
                            </div>
                        </div> 
                    </div> 



                    <?php
                endwhile;
            endif;

            wp_reset_query();
            ?> 
            <div class="clearfix">
</div>
<?php get_footer(); ?>

Answer 1

Chris's article looks for the img tag on your post. Since you are using WordPress, and I'm assuming the WordPress uploads feature, here is how you can get the first uploaded image on your post. Paste the following code in your theme's functions.php file.

//function to call first uploaded image in functions file
function main_image() {
$files = get_children('post_parent='.get_the_ID().'&post_type=attachment
&post_mime_type=image&order=desc');
  if($files) :
    $keys = array_reverse(array_keys($files));
    $j=0;
    $num = $keys[$j];
    $image=wp_get_attachment_image($num, 'large', true);
    $imagepieces = explode('"', $image);
    $imagepath = $imagepieces[1];
    $main=wp_get_attachment_url($num);
        $template=get_template_directory();
        $the_title=get_the_title();
    print "<img src='$main' alt='$the_title' class='frame' />";
  endif;
}

Now paste something like this in your template:

<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
  echo get_the_post_thumbnail($post->ID);
} else {
   echo main_image();
} ?>

Hope that helps.

Answer 2

catch_that_image(array(300,600)); should be catch_that_image();

You are not getting the first child attachment (as Syed suggested), you are just searching the post for images and displaying the first one you find, so there is no "dimensions" array to catch_that_image(); like in the_post_thumbnail();

Answer 3

I doubt there is anything wrong with the code bit - but please note that get_the_post_thumbnail grabs the featured image, not the first image in the content.