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="https://wordpress.stackexchange.com/questions/235683/<?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="https://wordpress.stackexchange.com/questions/235683/<?php the_permalink() ?>"><?php echo the_title(); ?></a>
</div>
<?php continue;
endif;?>
<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;
wp_reset_postdata();?>
</div>
3 Answers
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