WP get_post_thumbnail with Backstretch JS

Question

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>

When inside https://codex.wordpress.org/The_Loop (see samples there) use wp_get_attachment_url( get_post_thumbnail_id(the_ID(), $size, $attr )) — Michal S, Mar 12 '14 at 15:40

score 0 · Answer 1 · answered Mar 12 '14 at 15:14

0

Try using the global $post object like so:

<?php global $post; $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'full' ) ); ?>

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

answered Mar 12 '14 at 15:14

Ovidiu Iacomi

746
8
12

In which file are you attempting this ? Are the backbone and jquery file loaded at the time you write this code ? – Ovidiu Iacomi Mar 12 '14 at 15:24
It's in my footer.php, the rest of the javascript code is in the header.php – Erwin van Ekeren Mar 12 '14 at 15:30
In this case I must presume that something is changing your main query and thus you are not getting the correct post id in the footer of your page. – Ovidiu Iacomi Mar 12 '14 at 15:38
When i'm using the standard function: for example in a div then it gets the right image but I can't add that to the $.backstretch because it adds ect. – Erwin van Ekeren Mar 12 '14 at 15:43

kabr · Accepted Answer · 2014-09-02T08:13:12.540

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() ) ) );

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — Alexander Tobias Bockstaller, Sep 02 '14 at 07:42

WP get_post_thumbnail with Backstretch JS

2 Answers2