Show featured image as background image from postQuery

Question

The code below gets the image but I want it to be a background image. I believe I need to save the image as a variable first and then echo it out somehow. My PHP is not great so please give an example using the code. No esoteric answers, thanks.

<div class="main-slider" class="flexslider">
    <ul class="slides">
      <?php 
        // Get all posts in 'slider' category
        $post_categories = wp_get_post_categories( $post_id );
        $args = array( 
            'post_type' => array( 'Interaction', 'Print', 'Motion', 'Image', 'Sound' ),
            'numberposts' => 6,
            'category_name' => 'slider'
        );
        $postQuery = get_posts( $args );

        foreach( $postQuery as $post ) :
            setup_postdata($post);
            if ( has_post_thumbnail() ) { ?>
                <li class="frontSlider"><?php the_post_thumbnail('feature-slider'); ?>
                    <a href="<?php echo get_permalink(); ?>" title="Go to <?php echo the_title(); ?>" rel="bookmark">
                        <div class="flex-captionWrap">
                            <p class="flex-caption"><?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?></p><!-- Retrieves text string from Captions field in Media -->
                        </div>
                    </a>
                </li>
              <?php 
            }
        endforeach; ?>
    </ul><!-- .flexslider -->
</div><!-- .flexslider -->

Answer 1

You are correct, you will need to get the image URL and set is as a variable so you can echo it out as an inline style in your HTML. I've updated your foreach loop below and set the image as an inline style of your <li> element:

foreach( $postQuery as $post ) : setup_postdata($post);
    if ( has_post_thumbnail() ) { ?>
        /* Get the post thumbnail source so we can get the exact URL of the image.  This returns an array of stuff for us */
        $thumbImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'feature-slider' );
        /* Since we want the URL, let's get the first value from our new array and set it as $thumbImgUrl */
        $thumbImgUrl = $thumbImg['0']; ?>
        <li class="frontSlider" style="background-image: url('<?php echo $thumbImgUrl; ?>');">
            <a href="<?php echo get_permalink(); ?>" title="Go to <?php echo the_title(); ?>" rel="bookmark">
                <div class="flex-captionWrap">
                    <p class="flex-caption"><?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?></p><!-- Retrieves text string from Captions field in Media -->
                </div>
            </a>
        </li>
    <?php 
    }
endforeach; ?>

Hope that helps! I did not test this before posting it, but I've done this several times before so it should work just fine.

Answer 2

There's a couple things that you need to do to get the URL - you could combine them into one long sentence probably but I'll break it down.

WordPress stores the thumbnail ID in the postmeta table as _thumbnail_id so we need to get that using get_post_meta():

$thumb_id = get_post_meta( $post->ID, '_thumbnail_id', true );

Now that we have the ID we need to get the URL. Since we need the actual file URL we cannot use get_permalink() as that will return an attachment page so we instead need to use wp_get_attachment_image_src() which returns an array of values.

$img_arr = wp_get_attachment_image_src( $thumb_id, 'feature-slider' );

Looking at the codex we know that index 0 holds the actual image URL, so we can place it right in our list item:

<li class="frontSlider" style="background-image: url( '<?php echo $img_arr[0]; ?>' );">

Then in our CSS we can apply any further styles we need.