0

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>
Improve this question
  • It sounds like a CSS issue. I would use Chrome or Firefox to inspect the divs and manually add in an image URL as the background. Once you know the CSS is working you can then update the PHP to put the image in the right place. You might need to remove a float, change absolute positioning, override a transparent background, any number of things. – WebElaine Apr 10 '17 at 20:02
1

$image_src doesn't exist yet when the "Header_Upper_Left" div appears. So, you'd need to place the code for deriving whichever image you want to have used before you actually use $image_src.

There are a couple of ways to do this. One way that a lot of themes do it - like ones that have a top "Featured Post" or "Posts" format, is to start the query, get only the most recent post (and its data, attachments, whtaever), then rewind the query if you're using it as main loop and displaying the same post again.

The alternative would be just to separate the special div from the main query, and use a separate query or a wrapper like get_posts() or wp_get_recent_posts(), to get the post ID, and then use the post ID to get the attachment ID.

Improve this answer
  • Thanks. This helped. I moved the container DIV for that section to the position after the image thumbnail was called. It works now. Sort of. Now I have a separate problem in that it's taking only a portion of the image and repeating it across the entire div rather than filling the div. Is it possible to do this or is this a question for a different forum/thread? – OscarGuy Apr 13 '17 at 17:33
  • My pleasure - you're welcome. Could be you need to set background-repeat, position, size CSS, probably other characteristics of the target div.. Possibly adjust the HTML structure. – CK MacLeod Apr 13 '17 at 18:37
  • I figured out the reason, just not the solution. Turns out it's pulling only the thumbnail image, not the full image. I found the function for getting 'full', but it assumes I'm calling the_post_thumbnail, which I do not appear to be doing. It's pulling the img_src for the thumbnail. – OscarGuy Apr 13 '17 at 18:49
  • You'd have to produce your code to make the problem clear. If you're using wp_get_attachment_image or wp_get_attachment_image_src, then you can use a registered size or you can use a width/height array. Check the Codex. – CK MacLeod Apr 14 '17 at 6:13
  • The code is above. I got it from someone else, so I'm not sure what the problem with it actually is, other than it's pulling the thumbnail_id. if( 0 == $cinemasight_header_query->current_post ) : $thumbnail_id = get_post_thumbnail_id(); $image_src = wp_get_attachment_image_src( $thumbnail_id );?> – OscarGuy Apr 14 '17 at 13:47

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.