Adding the_post_thumbnail(); via css

I’m trying to set my posts page so that each post item loads with it’s featured image as it’s background. My code is working properly, but how do I add the post thumbnail as the background for each post? My code is attached below

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package Clean Blog
 */

get_header(); ?>

            <?php
    // Custom loop that adds a clearing class to the first item in each row
    $args = array('numberposts' => -1, 'order' => 'ASC' ); //For this example I am setting the arguments to return all posts in reverse chronological order. Odds are this will be a different query for your project


     $allposts = get_posts($args);
        $numCol = 2; // Set number of columns

        // Start Counter
        $counter = 0;
        foreach ($allposts as $post) {
            $content = '<div class="col-md-6 columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
            $content .= '<h3><a href="'.$post->guid.'">'.$post->post_title.'</a></h3>';
            $content .= $post->post_content;
            $content .= '</div>';
            echo $content;
            $counter ++;
        }
    ?>



    <style type="text/css">
        /* Added styles here for the demo, but ideally you would put this in a stylesheet.*/
        .columns-2 {
            float:left;
        }
        .first {
            clear:both;
            margin-left:0;
        }
    </style>
                <!-- /.col-lg-8.col-lg-offset-2.col-md-10.col-md-offset-1 -->

    <?php get_footer(); ?>

UPDATE
I’ve now tried adding it as an inline style, but the raw style is showing up on the page. I feel like I’m missing something easy

Read More

http://imgur.com/kkATCAC

            <?php
    // Custom loop that adds a clearing class to the first item in each row
    $args = array('numberposts' => -1, 'order' => 'ASC' ); //For this example I am setting the arguments to return all posts in reverse chronological order. Odds are this will be a different query for your project
    $allposts = get_posts($args);
    $numCol = 2; // Set number of columns
    $thumbnail = get_the_post_thumbnail( $page->ID, 'thumbnail' );



    // Start Counter
    $counter = 0;
    foreach ($allposts as $post) {
        $content = '<div class="col-md-6 columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'" style="background: url("${thumbnail}") center center/cover no-repeat;">'; // Add class to first column
        $content .= '<h3><a href="'.$post->guid.'">'.$post->post_title.'</a></h3>';
        $content .= $post->post_content;
        $content .= '</div>';
        echo $content;
        $counter ++;
    }


?>

UPDATE 2
I’ve checked the quotes but now I’m getting a parse error and the page doesn’t load at all.

$content = '<div style="background: url('${thumbnail}') center center/cover no-repeat;" class="col-md-6 columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column

Related posts

2 comments

  1. You could add it as an inline style:

    <?php
    
        $thumbnail = get_the_post_thumbnail( $page->ID, 'thumbnail' );
    
        $content = "<div class='your-post-thing' style='background: url('${thumbnail}') center center/cover no-repeat;'>...stuff...</div>';
    
        echo $content;
    ?>
    

    OR

    Depending on your browser support, you could use object-fit:

    <?php
        $content .= "<div class='your-post-thing'>";
            $content .= "<img class='background-image' src='${thumbnail}' />";
        $content .= "</div>";
    
        echo $content;
    ?>
    

    CSS:

    .your-post-thing {
        position: relative;
    }
    
    .background-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
  2. $content = '<div style="background-image:url('.wp_get_attachment_url(get_the_post_thumbnail()).')" class="col-md-6 columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
    

    you can try something like this, and in your css you can add the rules to view correctly the background.

Comments are closed.