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