Skip to content

Instantly share code, notes, and snippets.

@10h30
Forked from srikat/backstretch-set.js
Last active March 7, 2017 09:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save 10h30/419579e51c2bc174c48b to your computer and use it in GitHub Desktop.
Save 10h30/419579e51c2bc174c48b to your computer and use it in GitHub Desktop.
Set Featured Image as Header's background using Backstretch in Genesis
jQuery(function( $ ){
$(".site-header").backstretch([BackStretchImg.src],{duration:3000,fade:750});
});
<?php
//* Do NOT include the opening php tag
add_action( 'wp_enqueue_scripts', 'sk_enqueue_backstretch' );
/**
* Set Featured Image as Header's background using Backstretch on singular entries.
* For singular entries not having a Featured Image and other sections of the site,
* like category archives, a default image will be set as Header's background.
*
* @author Sridhar Katakam
* @link http://sridharkatakam.com/set-featured-image-headers-background-using-backstretch-genesis/
*/
function sk_enqueue_backstretch() {
wp_enqueue_script( 'backstretch', get_stylesheet_directory_uri() . '/js/jquery.backstretch.min.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'backstretch-set', get_stylesheet_directory_uri() . '/js/backstretch-set.js' , array( 'backstretch' ), '1.0.0', true );
if ( has_post_thumbnail() && is_singular() ) {
$featured_image_url = wp_get_attachment_url( get_post_thumbnail_id() );
$backstretch_src = array( 'src' => $featured_image_url );
} else {
$default_header_url = get_stylesheet_directory_uri() . '/images/header-default.jpg';
$backstretch_src = array( 'src' => $default_header_url );
}
wp_localize_script( 'backstretch-set', 'BackStretchImg', $backstretch_src );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment