CODEWITHSUNDEEP
phpjqueryhtmlcsswordpress
user3550879
user3550879

Reputation: 3469

Making post-thumbnail a background image

My Wordpress site displays all the posts, stacked in articles spanning the full width on the index.php using rows (Bootstrap 3).

index.php - HTML

<div>
<?php if ( have_posts() ) : ?>

        <?php /* Start the Loop */ ?>
        <?php while ( have_posts() ) : the_post(); ?>

            <?php
                get_template_part( 'content' );
            ?>

        <?php endwhile; ?>
        <div class="clearfix"></div>
        <div class="col-md-12">
        </div>
    <?php else : ?>

        <?php get_template_part( 'no-results', 'index' ); ?>

    <?php endif; ?>
</div>

content.php displays the post in each article (which are stacked on top of each other, full width, down the page)

<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>
<div class="row">
  <div class="col-md-12 horiz-cell">
    <h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <?php the_category(', '); ?>
  </div>    
</div>
</article><!-- /#post -->

I have the title and category showing up properly in each row. I would like each post's post-thumbnail (I added its use in functions.php) to be the background image of each row. Filling the whole space (background-size: cover)

Basically large, '100% width' & '300px(roughly) height' rows, each with corresponding title, category, and their post-thumbnail as a background-image.

Upvotes: 1

Views: 8352

Answers (2)

Ben Cole
Ben Cole

Reputation: 1907

If not done yet, enable thumbnails and define custom image sizes:

// Enable thumbnails
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size',580, 480, true);

To display the thumbnails: First, get the featured image URL for the post:

The parameter 'my-fun-size' should be the name of the size of the image you defined in your functions.php file - it can also be 'full' or 'thumbnail'

<?php
if (has_post_thumbnail()) {
    $thumbnail_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'my-fun-size' );
    $thumbnail_url = $thumbnail_data[0];
}
?>

Then add the image as a background:

<article id="post-<?php the_ID(); ?>" style="background-image:url('<?php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >
<div class="row">
  <div class="col-md-12 horiz-cell">
    <h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <?php the_category(', '); ?>
  </div>    
</div>
</article><!-- /#post -->

And finally, apply some CSS to achieve your desired background-size:

article {
  background-size: cover;
}

Upvotes: 3

simmer
simmer

Reputation: 2711

It sounds like you've already figured out the CSS part, so here's the PHP/HTML you're looking for:

<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>

  <?php $imgurl = wp_get_attachment_src( get_post_thumbnail_id($post->ID) ); ?>

  <div class="row" style="background-image: url('<?php echo $imgurl[0]; ?>');">
    <div class="col-md-12 horiz-cell">
      <h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
      <?php the_category(', '); ?>
    </div>    
  </div>
</article><!-- /#post -->

References:

Upvotes: 0

Related Questions