[Resolved] Show featured images as inside-article background on blog archives

[Andrew]

https://generatepress.com/forums/topic/making-blog-inside-article-div-show-featured-image-as-a-background-image/

That query linked above has a solution from Tom that gives the same featured image for all the inside-article divs on the archive pages.

How to fix it, so each archive entry shows its own featured image as a background?

[Tom]

Hi there,

You’d likely need to create a custom page template in order to do that, unfortunately. Without doing that, you’d need to re-query the posts in wp_head and loop through them to create CSS for each individual post.

From a simplicity/performance standpoint, the custom template is the way to go.

For example, copy content.php and add it to your child theme.

Then, right above <article>, do this:

<?php
$image = get_the_post_thumbnail_url( get_the_ID() );
$background_css = '';

if ( $image ) {
    $background_css = 'style="background-image: url( ' . $image . ' );"';
}
?>

Then you’d add $background_css to the <article> element.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php generate_do_microdata( 'article' ); ?> <?php echo $background_css; ?>>

[Andrew]

Great, I’ll give that a go. But thinking about it, wouldn’t this be a better thing to do with your WP Show Posts plugin?

[Andrew]

I tried your solution and I found the columns hard to control, specifically no margin between them and adding a margin messes up the layout.

http://hotelutopia.pash.space/category/attractions/

[Tom]

Try applying the image to the .inside-article element instead.

[Andrew]

Great, yes, of course, thanks!

[Tom]

You’re welcome 🙂

[Author]

Posts