WordPress.org

1. occasio
   Member
   Posted 2 years ago #

   Is there a way to pass the post thumbnail info to use as a background image.

2. Demonhood
   Member
   Posted 2 years ago #

   Ever figure this out? I'd like to know as well.

3. Frumph
   Member
   Posted 2 years ago #

   Yes, yes you can. Do something like this:

   For example for the div that your using for that area you want the background.

   <?php
   $thumbnail = '';
   if (function_exists('has_post_thumbnail')) {
       if ( has_post_thumbnail() ) {
            $thumbnail = get_the_post_thumbnail($post->ID,'thumbnail');
       }
   }

   Then in the div itself

   <div style="background: url('<?php echo $thumbnail; ?>') no-repeat;">
      info inside of div.
   </div>

   Pretty simple huh?

4. Demonhood
   Member
   Posted 2 years ago #

   Ah, that's helpful. I'm much closer, thanks. The problem is that the call for the thumbnail also pulls in the width/height and alt tags. Stuff I don't need (and that throw's off the inline css). How can I strip that?

   <?php $posts=query_posts('page_id=22');
   if (have_posts()) : while (have_posts()) : the_post(); ?>
   
   <?php
   $thumbnail = '';
   if (function_exists('has_post_thumbnail')) {
       if ( has_post_thumbnail() ) {
            $thumbnail = get_the_post_thumbnail($post->ID,'featured');
       }
   }
   ?>
   
   <?php endwhile; endif; ?>
   <div style="background: url(<?php echo $thumbnail; ?>) no-repeat;>
   <h3><?php the_title(); ?>:</h3>
   <h4>Player's Name!</h4>
   </div>

   Which outputs this:

   <div style="background: url(<img width="292" height="260" src="http://www.mydomain.com/wp/wp-content/uploads/2010/04/player-featured-292x260.jpg" class="attachment-featured wp-post-image" alt="" title="player-featured" />) no-repeat;>
   <h3>Featured Skater:</h3>
   <h4>Player's Name!</h4>
   </div>

   So if I could just easily strip everything before the http of the image and everything after, I'd be good to go.

5. Frumph
   Member
   Posted 2 years ago #

   <?php
   $thumbnail = '';
   // Get the ID of the post_thumbnail (if it exists)
   $post_thumbnail_id = get_post_thumbnail_id($post->ID);
   // if it exists
   if ($post_thumbnail_id) {
   $size = apply_filters('post_thumbnail_size', 'post-thumbnail');
   $thumbnail = wp_get_attachment_image($post_thumbnail_id, $size, false, '');
   }
   if (!empty($thumbnail)) { ?>
   <div style="background: url('<?php echo $thumbnail; ?>') no-repeat;">
   <?php } else { ?>
   <div class="no-thumbnail">
   <?php } ?>

   I'm pretty sure that will work and not add the html with it. Basically I looked at the function get_the_post_thumbnail inside wp-includes/post-thumbnail-template.php and looked how they were doing it.

6. Frumph
   Member
   Posted 1 year ago #

   found it out, here it is:
   

   $post_image_id = get_post_thumbnail_id($post_to_use->ID);
   		if ($post_image_id) {
   			$thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
   			if ($thumbnail) (string)$thumbnail = $thumbnail[0];
   		}

   $thumbnail will return the string path of the thumbnail

   and make sure you use $post_to_use as either $post or whatever your passing to it

7. benkenobi77
   Member
   Posted 1 year ago #

   I've tried this solution and keep having this tiny problem - an issue with the quotes within the inline css.

   I use the div code and I always get (with our without the image) this inside of the div as orphaned code: ) no-repeat;>

   It ends the statement the second single quote and screws up the statement - what am I doing wrong?

8. Dalton Rooney
   Member
   Posted 1 year ago #

   Frumph - that's a super useful bit of code, thanks for that.

9. geezerd
   Member
   Posted 1 year ago #

   Any chance you could post the code needed to use the post thumbnail image as a background image for the TITLE of the post? The H2, or maybe better if it was the background for the 'a' link for the title H2?
   Thanks!

10. superuserx
    Member
    Posted 1 year ago #

    You could use this for the background images. Place in the loop,
    

    <?php
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
    ?>

    and your div with background:
    <div style="background: url(<?php echo $src[0]; ?> ) !important;">text </div>

    If you place outside loop, you get same image for each div. You may be like "duh" but it would have saved me a couple minutes.

11. lalindsey
    Member
    Posted 1 year ago #

    Thanks Frumph - I am working on a project that this is perfect for and just tried it and it works awesome!

12. sefo262
    Member
    Posted 1 year ago #

    It works! Thanks Frumph

Topic Closed

This topic has been closed to new replies.