[SOLVED] WP get_post_thumbnail with Backstretch JS

WP get_post_thumbnail with Backstretch JS

I am using a javascript that's called 'Backstretch' to display an image on the back of my website that resizes when the viewport is getting bigger or smaller. Now I would like to combine it with the get_post_thumbnail function from WordPress so I can set a background image as featured image.

I tried the standard WP function but that doesn't work because it adds tags:

 $.backstretch("<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>");

So I need to strip off those tags.. I'm getting close because i'm now getting an url (and image) but it's always the same one even though I set a different featured image on every page

 <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post_id, $size, $attr ) ); ?>

 <script>$.backstretch("<?php echo $url; ?>");</script>

Solution

You get the answer to your question in this tutorial: http://sridharkatakam.com/set-featured-image-full-sized-background-posts-pages-wordpress/

Create a backstretch-set.js-file and include jQuery(document).ready(function($) { $("body").backstretch([BackStretchImg.src],{duration:3000,fade:750}); });

and then enqueue both js-files (backstretch.js and your backstretch-set.js) in your functions.php

//* Enqueue Backstretch script
add_action( 'wp_enqueue_scripts', 'enqueue_backstretch' );
function enqueue_backstretch() {

//* Load scripts only on single Posts, static Pages and other single pages and only if featured image is present
if ( is_singular() && has_post_thumbnail() )

    wp_enqueue_script( 'backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.backstretch.min.js', array( 'jquery' ), '1.0.0' );
    wp_enqueue_script( 'backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'backstretch' ), '1.0.0' );

    wp_localize_script( 'backstretch-set', 'BackStretchImg', array( 'src' => wp_get_attachment_url( get_post_thumbnail_id() ) ) );