Set background-image css to the featured image in wordpress using jQuery

0
votes

for reference http://vvcap.net/db/Bs03ucQSrylV5LBiWduY.htp here's a thumbnail of featured image of a post http://vvcap.net/db/_45qWkuQwluTrYF51tFn.htp here's a square i want to set the background-image of. The small square is made from a post loop (shown below). Inside the loop is a a check to see if the post as a "featured image attracted"

CSS: currently this is the only css that styles the div bg. (this should be replaced)

 section > div { background:#00c8e8;}

Compiled source HTML the second section posts a featured image(ontop of div) as example. First section has no featured image.

<section  class="resource">
   <div> 
        <a href="http://localhost/dov1/?custom_type=logo-design" rel="bookmark" title=" Logo Design">Logo Design</a>
  </div>
</section>

<section  class="resource">
  <div> 
        <a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread">Magazine Spread</a>

            <img width="125" height="125" src="http://localhost/dov1/wp-content/uploads/2012/03/project2_web-125x125.jpg" class="attachment-post-thumbnail wp-post-image" alt="project2_web" title="project2_web" />     
 </div>
</section>

HTML/PHP

<?php 

        $args = array(  
        'post_type' => 'custom_type', 
        'posts_per_page' => '-1' 
        );

        $loop = new WP_Query( $args );

        while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <section  class="resource">
              <div> 
          <a href="<?php the_permalink() ?>" rel="bookmark" title=" <?php the_title_attribute(); ?>">
                <?php the_title(); ?>
                <?php 
            // check if the post has a Post Thumbnail assigned to it. 
        if ( has_post_thumbnail() ) 
            { 
          //run jQuery here (prob replace the_post_thumbnail();)
              the_post_thumbnail();
        } 
        ?>
    </a> </div>
</section>
<?php endwhile; ?>

I'm not very strong with jQuery or php. Luckily, the logic to this process makes sense.

  1. Loop the posts (check)
  2. Test to see if posts have featured image (check)
  3. Execute jQuery to replace the background images with the_post_thumbnail();
  4. Profit!

Where we run into another caveat is how do we distinguish and assign the distinguished the proper background image? I only have 1 form fitting css style. It would make sense if it treated the process per entry. Unfortunately, wouldn't it rewrite over each entry? I know this is a big question stack but please I'll love you forever for the help!

Matthew

UPDATED HTML SOURCE

   <section  class="resource">

      <div> 

            <a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread">Magazine Spread</a>

            <img width="125" height="125" src="http://localhost/dov1/wp-content/uploads/2012/03/project2_web-125x125.jpg" class="attachment-post-thumbnail wp-post-image" alt="project2_web" title="project2_web" />      </div>

    </section>
2
phpjavascriptjquerycsswordpress
To use jQuery we need to see the (relevant) rendered HTML ('view source'). – David says reinstate Monica
sorry it is there. under compiled source – Armeen Harwood
I can post all the source if you like? I'll update the whole page of source if you would like but thats what is made from the posts – Armeen Harwood
I did remove the_post_thumbnail(); from the source i'll add it in comments here sorry if this lead to any confusion. – Armeen Harwood
The featured image being the only img element that's in the div? And the image should become the background-image of the div itself? Should the img be removed subsequently? – David says reinstate Monica

2 Answers

1
votes

Assuming that there's only one img element per section element, and that you wish that image to become the background-image of the parent div of the img:

$('section img').each(
    function(){
        var src = this.src,
            h = $(this).height(),
            w = $(this).width();
        $(this).closest('div').css({
            'min-width' : w,
            'min-height' : h,
            'background-image' : 'url(' + src + ')',
            'background-repeat' : 'no-repeat',
            'background-position' : '50% 50%'
        });
    }).remove();​

JS Fiddle demo.

References:

0
votes

By the looks of the Codex you can just pass that information as the second parameter.

CSS

.post-thumbnail {
    background:#00c8e8;
}

PHP

$size = array( 32, 32 );
$attr = array( 'class' => 'post-thumbnail' );
the_post_thumbnail( $size, $attr );

In order to make the post thumbnail a background I would use get_the_post_thumbnail()

<?php $bg = wp_get_attachment_image_src( get_post_thumbnail_id($post_id, $size, $attr)); ?>
<div style="background: <?php echo $bg; ?>;">...</div>

You would have to pass the parameters you want to it - specific post ids or whatever.