How to implement Backstretch (as pg bg) with child theme

Community Forums Forums Design Tips and Tricks How to implement Backstretch (as pg bg) with child theme

This topic is: not resolved

Tagged: 

This topic contains 5 replies, has 4 voices, and was last updated by  scoe 7 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #8996

    Riavon
    Participant
    Post count: 95

    These are the instructions I’ve saved for myself. Thought I’d share them with the community in case anyone else wants to use Backstretch for a full width responsive page background image. I’m still learning, but this is what I’ve figured out, so far.

    To use the backstretch script with Genesis sites, it’s simple! Just add these lines of code:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js "></script>
    <script>
      // To attach Backstretch as the body's background
      $.backstretch("path-to-the-image/image.jpg");
    </script>

    …in the Genesis Theme Settings area, in the very last entry field: “Enter scripts or code you would like output to wp_footer():” this code is for a single bg image sitewide. The script is called from where it is stored so there is no need to install the scripts locally (unless you want to.) If you do, those scripts can be found HERE.

    Or download the master files (all of it) from Scott Robbin

    To add Backstretch to a block level element:

    <script>
     $(".foo").backstretch("path/to/image.jpg");
    </script>

    After you create the page, get the page’s id number by hovering mouse over the page name in the list view, looking at address bar at the bottom of your screen to show the page (post) id. Or view source of the page and look for it in the tag.

    For example:

    $(“.page-id-635″).backstretch(“path-to-image.jpg”);

    gives me a different background image on page id#635 than on the home/other pages.


    Twitter: @riavonentprises

    • This topic was modified 1 year, 3 months ago by  Riavon. Reason: added more codes
    • This topic was modified 1 year, 3 months ago by  Riavon.
    • This topic was modified 1 year, 3 months ago by  Riavon.
    • This topic was modified 1 year, 3 months ago by  Riavon. Reason: added more codes
    • This topic was modified 1 year, 3 months ago by  Riavon.
    • This topic was modified 1 year, 3 months ago by  Riavon.
    #9004

    Riavon
    Participant
    Post count: 95

    All together it looks something like this (replace page id#’s and paths to images with your own). I upload the images to the media library and use the full path to it, i.e. “http://mywebsite.com/wp-content/uploads/2013/01/image-name-1.jpg ” .

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js "></script>
    <script>
      // To attach Backstretch as the body's background
      $.backstretch("path-to-the/image1.jpg");
    </script>
    <script>
     $(".page-id-635").backstretch("path-to-the/image2.jpg");
     $(".page-id-725").backstretch("path-to-the/image3.jpg");
    </script>
    

    Twitter: @riavonentprises

    #11551

    Ipstenu
    Participant
    Post count: 9

    Since jquery is included in WP and reincluding it multiple times can cause things to go blaaaaargh, I would suggest this:

    Put the backstretch file in your theme’s js folder and then this in your functions:


    /** Stretch your back **/

    function backstretch_js() {
    wp_enqueue_script(
    'backstretch',
    get_stylesheet_directory_uri() . '/js/backstretch.js',
    array('jquery'), '2.3', yes
    );
    }
    add_action('wp_enqueue_scripts', 'backstretch_js');

    (You can use //cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js instead of the get stylesheet if you just wanna use google).

    Then you just need the block element. I put it in /wp-admin/admin.php?page=genesis on the footer section. Works nicely :)

    #21098

    Riavon
    Participant
    Post count: 95

    Thanks, Ipstenu, this is a much more elegant – and properly done – solution!


    Twitter: @riavonentprises

    #25176

    yellowdog
    Participant
    Post count: 36

    I am trying to implement this backstretch

    I have uploaded the .js file and added the code to functions.php but i am stuck at the next part?

     

    How do i use the Block element?

    Damn..this genesis has a learning curve for me!!

     

    #60864

    scoe
    Participant
    Post count: 45

    Wonder if anyone has done with this the new Pro version?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.