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

Home Forums Support [Resolved] Making blog inside-article div show featured image as a background image

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #672633
    Margot

    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

    #672874
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #673227
    Margot

    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.

    #673382
    Margot

    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?

    #673405
    Tom
    Lead Developer
    Lead Developer

    That looks like a good way to do it πŸ™‚

    #673533
    Margot

    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?

    #673920
    Tom
    Lead Developer
    Lead Developer

    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;
            }
        } );
    } );
    #674462
    Margot

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

    #674483
    Tom
    Lead Developer
    Lead Developer

    You’re welcome! Really glad you’re enjoying GP! πŸ™‚

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.