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

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="https://wordpress.stackexchange.com/questions/235683/<?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="https://wordpress.stackexchange.com/questions/235683/<?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