1

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 -->
  • 1
    Fair enough you're not familiar with PHP, but "no esoteric answers thanks" reads as "just do it for me so I can copy paste". We like to help people here, not just do their work for free - careful with your phrasing! – TheDeadMedic Apr 28 '16 at 15:02
2

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.

1

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.

  • 1
    Thanks for the step by step tutorial Howdy_Mcgee, really helpful. Been trying to get my head around this for ages. Will watch my phrasing in future. – Paubab Apr 28 '16 at 15:33
  • 1
    You get an upvote from me since you went into greater detail and linked to the docs :) – mread1208 Apr 28 '16 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.