Search code examples
javascriptphpwordpressjquery-backstretch

Backstretch.js with WordPress Featured Image from Page ID


I am working on a single page website where every section has its content loaded in through a post id.

<?php $id=193; $post = get_page($id); echo $post->post_content; ?>

Every page has its own full background image thats placed under the content div, I use Backstretch.js to create that image in a div id.

Example.
http://jsfiddle.net/4k6ty4n1/4/

Till here everything works perfect but I would like to make it possible that the background images can be editted with the Featured Image-option in WordPress instead of being hardcoded as it is right now but can't find a solution.

It should be something like this (i guess):

$(function() {
$("#pageOneImage").backstretch("<?php $id=193; $post = get_post_thumbnail_id($id); echo $post->get_post_thumbnail_id; ?>");
$("#pageTwoImage").backstretch("<?php $id=195; $post = get_post_thumbnail_id($id); echo $post->get_post_thumbnail_id; ?>");
});

Solution

  • It was actually pretty simple:

    <?php $thumb_id = 1; $url = wp_get_attachment_url( get_post_thumbnail_id($thumb_id) ); ?>
    
    <script>
    $("#divname").backstretch("<?php echo $url ?>");
    </script>