Is there a way to pull the first featured image in a loop and not all other featured images?

Question

I have a loop that pulls the first three posts of a category. I want to use the featured image of the first post pulled for the background of the section the titles and links to these posts are displayed.

Is it possible to pull the first image without pulling all other images of posts that were pulled in the loop?

Here's the current loop:

 <?php
 $cinemasight_header_query = new WP_Query( array( 

 'category_name' => 'academy-awards',
 'posts_per_page' => 3 

 ) );

 if ($cinemasight_header_query->have_posts()) :

 while($cinemasight_header_query->have_posts()) :
 $cinemasight_header_query->the_post();?>

 <span class="Categories_Upper_Left">
 <a href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
 </span>

 <?php endwhile;

 endif;

 wp_reset_postdata();?>

EDIT (8/13/16, 8:56AM CST)

Revised for most recent corrections.

<div class="Header_Section_Left"><span class="Category_Header_Title">ACADEMY AWARDS<br /></span><div id="Header_Upper_Left">
<?php
$cinemasight_header_query = new WP_Query( array( 

    'category_name' => 'academy-awards',
    'posts_per_page' => 3 

) );

if ($cinemasight_header_query->have_posts()) :

while($cinemasight_header_query->have_posts()) :
    $cinemasight_header_query->the_post();

if( 0 == $cinemasight_header_query->current_post ) :
  $thumbnail_id = get_post_thumbnail_id();
  $image_src = wp_get_attachment_image_src( $thumbnail_id );?>

<div class="Categories_Upper_Left" style="background-image: url( '<?php echo $image_src[0]; ?>') ;">
<a href="<?php the_permalink() ?>"><?php echo the_title(); ?></a>
</div>

  <?php continue;
endif;?>

<span class="Categories_Upper_Left">
 <a href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
</span>

<?php endwhile;

endif;

wp_reset_postdata();?>
</div>

Answer 1

I believe you are referring to this answer

You could check the index of the current loop and use get_the_post_thumbnail to get the image tag or the_post_thumbnail to echo it.

You can use the $current_post property to get the current index and show only on first occurrence. Here's the loop modified to achieve this.

<?php

$cinemasight_header_query = new WP_Query( array( 
 'category_name' => 'academy-awards',
 'posts_per_page' => 3 
) );

if ($cinemasight_header_query->have_posts()) :

  while($cinemasight_header_query->have_posts()) :

    $cinemasight_header_query->the_post(); 

    if( 0 == $cinemasight_header_query->current_post ) : // This will print on first index only
?>

<span class="Categories_Upper_Left">
  <span class="my-image-class"> <?php the_post_thumbnail(); ?></span>
  <a href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
</span>

<?php 
  continue; // skip the rest of this loop because we got what we needed
endif; // End if for first index ?> 

<span class="Categories_Upper_Left">
  <a href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
</span>

<?php 

  endwhile;

endif; // End loop

wp_reset_postdata();

?>

In my comment below, I used get_the_post_thumbnail() which returns the <img> tag without printing it.

the_post_thumbnail() will echo it's output. If you have custom image size, you can pass it as an argument with this function to retrieve it. Essentially, this function is a wrapper for get_the_post_thumbnail() and passes post-thumbnail as a default image size if none is given.

Chose which one suits you better

EDIT

For some reason I missed that you wanted to get the image to use as background. So you need only to fetch the src of the image and not the whole <img> tag

Just change the conditional for the first index like so

    if( 0 == $cinemasight_header_query->current_post ) : // This will print on first index only
      $thumbnail_id = get_post_thumbnail_id();
      $image_src = wp_get_attachment_image_src( $thumbnail_id ); ?>

<div class="my-image-class" style="background-image: url( '<?php echo $image_src[0]; ?>') ;">
  <span> <?php echo the_title(); ?> </span>
</div>

    <?php 
      continue; // skip the rest of this loop because we got what we needed
    endif; // End if for first index ?> 

wp_get_attachment_image_src() will return an array of

• [0] : image url
• [1] : width
• [2] : height
• [3] : is_intermediate
• false if no image is found

and you can also pass the image size as second parameter to the function

Answer 2

Cleanest is with two separate loops. Run a first loop for just one item (thumbnail included) and then a second loop for the other items with 'offset' => 1 (thumbnails not included).

Answer 3

<?php
$cinemasight_header_query = new WP_Query( array( 
    'category_name' => 'academy-awards',
    'posts_per_page' => 3 
) );

if ($cinemasight_header_query->have_posts()) :
    $counter = 0;
    while($cinemasight_header_query->have_posts()) :
        $counter++;
        $cinemasight_header_query->the_post();

        if ( $counter == 1 ) {
            if ( has_post_thumbnail() ) {
                the_post_thumbnail( 'image_size', array( 'class' => 'img-responsive' ) );
            }
        } ?>

        <span class="Categories_Upper_Left">
            <a href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
        </span>

    <?php endwhile;

endif;

wp_reset_postdata();?>