2

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>
5
  • 1
    Could edit your question using the edit link above and post your loop code please? – Howdy_McGee Aug 11 '16 at 17:24
  • you have a closing php tag that should not be there. Look after your while $cinemasight_header_query->the_post();?> should not have the ?> also you need to add your normal HTML to display the remaining 2 posts (without the image) between the endif and the endwhile just after the continue – bynicolas Aug 13 '16 at 0:59
  • Ok. I did tinkering, but I may still have everything in the wrong spot. Here's the test site I'm using to explore these changes: anniversary.cinemasight.com I'll post my revised code. Currently, I'm only working on the portion in the upper left corner. (As a frame of reference, the logo I'm working on will go right in the middle of the four quadrants. – OscarGuy Aug 13 '16 at 13:56
  • So, I just realized that I'm going about this the wrong way. I may have to go with two loops after all and that I may not have wanted this as a true background image. I may have to experiment a bit. – OscarGuy Aug 13 '16 at 14:42
  • I see you got the code working, Great! If you just want the image, you can use get_post_thumbnail as in my answer. If you choose a different direction, just post a new question. Cheers! – bynicolas Aug 13 '16 at 17:25
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

3
  • When you say to "do your image tag formatting here," what am I putting in there? Because when I try to add spans, it doesn't work. – OscarGuy Aug 12 '16 at 13:59
  • Well get_the_post_thumbnail() will give you your <img> tag. so if you wanted to wrap this around a <span> then you could try something like echo '<span class="my-image-class">' . get_the_post_thumbnail() . '</span>'; I'll update my answer with the code you put in your question. – bynicolas Aug 12 '16 at 18:35
  • I think this one may be answering my question, but I'm not 100% certain I've amended the code correctly. I edited my answer to reflect what you provided above (I can't figure out how to put code into comments. – OscarGuy Aug 12 '16 at 20:31
0

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).

3
  • 1
    But that makes two queries (and all associated meta queries) rather than one. – Andy Macaulay-Brook Aug 11 '16 at 22:07
  • 1
    Actually, I think the cleanest is how I described it in my answer, just check the current index and output if we are at first index. No double queries – bynicolas Aug 11 '16 at 23:29
  • @bynicolas yes, it's how I'd do it and you got my upvote :-) – Andy Macaulay-Brook Aug 12 '16 at 13:57
0
<?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();?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.