I want to display the most recent article title, possibly an excerpt, in a specific category in a specific div on my front page. I also want to use the featured image from that post as the background for the div. Is there any way to do this? The current display of that DIV looks like this:
<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">
<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>
I tried to insert the following into the Header_Upper_Left div above, but nothing shows up. If I put it down in the Categories_Upper_Left div, it does display a background image, but only for the URL of that post link only.
style="background-image: url( '<?php echo $image_src[0]; ?>') ;"
Is there something I'm doing wrong, or another call that I need to make within the div to get it to work?
Here's the solution that resolved my issue. I've posted only the relevant section of the content to avoid clutter. Essentially, I just moved the Header_Section_Left DIV block to the point in the script after it pulls the image information. I've also added a separate bit of code that we discussed in comments below to pull the full image and not just the small thumbnail of it.
if( 0 == $cinemasight_header_query->current_post ) :
$thumbnail_id = get_post_thumbnail_id();
$image_src = wp_get_attachment_image_src( $thumbnail_id $size = 'full');?>
<div class="Header_Section_Left"><span class="Category_Header_Title">ACADEMY AWARDS<br /></span><div id="Header_Upper_Left">
<div class="Categories_Upper_Left">
<a href="<?php the_permalink() ?>"><?php echo the_title(); ?></a>
</div>