I am trying to add a grid of blog posts to my homepage template. I have pulled in the content from 4 blog posts, now I just need to pull in the featured image as a background for each div.
Here is my current, half finished code, the background inline style isnt actually working right now, and I can’t figure out why.
<?php /* Template Name: Home Content Template*/ ?>
<?php get_header(); ?>
<div class="row show-grid lrds-hm-grd-wrppr">
<div class="span1 lrds-hm-grd-bx lrds-hm-grd-bx-1" data-original-title="" title="" style="background:URL(<?php the_post_thumbnail_url( 'full' ); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<?php
$post_id = 172;
$queried_post = get_post($post_id);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<div id="custom-bg" style="background-image: url('<?php echo $image[0]; ?>')">
</div>
<?php endif; ?>
</div>
<div class="span2 lrds-hm-grd-bx lrds-hm-grd-bx-2" data-original-title="" title="" style="background:URL(<?php the_post_thumbnail_url( 'full' ); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<?php
$post_id = 174;
$queried_post = get_post($post_id);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
<div class="span3 lrds-hm-grd-bx lrds-hm-grd-bx-3" data-original-title="" title="" style="background:URL(<?php the_post_thumbnail_url( 'full' ); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<?php
$post_id = 176;
$queried_post = get_post($post_id);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
<div class="span4 lrds-hm-grd-bx lrds-hm-grd-bx-4" data-original-title="" title="" style="background:URL(<?php the_post_thumbnail_url( 'full' ); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<?php
$post_id = 210;
$queried_post = get_post($post_id);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_title('<h2>','</h2>'); ?>
<?php the_content(); ?>
</div>
<?php
// tags anyone?
the_tags();
?>
<?php endwhile; ?>
<?php if (!is_singular()) : ?>
<div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>
<?php endif; ?>
<?php else : ?>
<div class="alert alert-info">
<strong>No content in this loop</strong>
</div>
<?php endif; ?>
</div>
<div class="col-md-2">
<?php
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar')) : // Sidebar name
?>
<?php
endif;
?>
</div>
</div>
<?php get_footer(); ?>
Read more here: Is there any actual way to pull in a featured image from a blog post into a div on another page template as a background image.