Site logo

Archived topic

Making blog inside-article div show featured image as a background image

8 replies · Started by Margot on September 9, 2018

Viewing posts 1–9 of 9

I would like to make my blog's inside-article divs show article featured images as background images instead of the images being listed as regular content. Is there an elegant solution to doing this?

ps. I have a child theme installed so I can make changes to the content.php page

Hi there,

First, I would disable featured images in Customize > Layout > Blog.

Then try this:

add_action( 'wp_head', function() {
    $image = get_the_post_thumbnail_url( get_the_ID() );

    if ( ! $image ) {
        return;
    }
    ?>
    <style>
        .inside-article {
            background-image: url(<?php echo $image; ?>);
        }
    </style>
    <?php
} );

Let me know if this helps or not :)

Ah I think I might not have explained well enough. I wanted the featured image of each (different) individual blog post to show up as a background image inside their respective inside-article divs.

The snipped you mentioned made all the inside article divs the same featured post image.

I tried this in my child theme content.php file

<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php generate_article_schema( 'CreativeWork' ); ?>>
	<div class="inside-article" style="background: url('<?php echo $backgroundImg[0]; ?>')  no-repeat center center / cover;" >

But I'm having some layout issues. The background images are working great but my grid is off now, especially in relationship to featured post and regular post.

Just figured out the grid problem (it was unrelated). So I think I'm all set except just wanted to get your thoughts on the above snippet? Is that an ok way to do it?

That looks like a good way to do it :)

What would I need to do in order to make the entire inside-article div clickable so that when the user clicks on the div, they arrive on the post?

You'd need to use javascript. Something like this might work:

jQuery( document ).ready( function($) {
    $( '.inside-article' ).on( 'click', function() {
        var article = $( this ),
            url = article.find( '.entry-title a' ).attr( 'href' );

        if ( url ) {
            window.location.href = url;
        }
    } );
} );

That worked perfectly! Thank you! And thank you especially for creating such a kicka** theme!

You're welcome! Really glad you're enjoying GP! :)

This archived topic is closed to new replies.