Skip to content

Instantly share code, notes, and snippets.

@About2git
Forked from srikat/backstretch-set.js
Last active August 29, 2015 14:15
Show Gist options
  • Select an option

  • Save About2git/0d951bb9df4e4b5ece93 to your computer and use it in GitHub Desktop.

Select an option

Save About2git/0d951bb9df4e4b5ece93 to your computer and use it in GitHub Desktop.
Applying Backstretch to multiple Featured images in Genesis
jQuery(function( $ ){
$( ".content .featured-image" ).each(function() {
var featured_image = $(this).data( "featuredimage" );
$(this).backstretch([BackStretchImg]=featured_image,{duration:3000,fade:750});
});
});
add_action( 'genesis_before_entry', 'sk_set_bkgrd_image' );
/**
* If the Post has a featured image, display link to single Post above each Post while setting a custom data attribute to the Featured image's URL.
*
* Context: Posts page, all archives and search results pages.
*
* @author Sridhar Katakam
* @link http://sridharkatakam.com/applying-backstretch-multiple-featured-images-genesis/
*/
function sk_set_bkgrd_image() {
if ( ! ( is_home() || is_archive() || is_search() ) ) {
return;
}
if ( has_post_thumbnail() ) {
$featured_image_url = wp_get_attachment_url( get_post_thumbnail_id() );
echo '<a class="featured-image" data-featuredimage="'. $featured_image_url .'" href="'. get_permalink() .'" rel="bookmark"></a>';
}
}
add_action( 'wp_enqueue_scripts', 'sk_enqueue_backstretch' );
/**
* Load Backstretch and its initialization script.
*
* Context: Posts page, all archives and search results pages.
*
* @author Sridhar Katakam
* @link http://sridharkatakam.com/set-featured-image-headers-background-using-backstretch-genesis/
*/
function sk_enqueue_backstretch() {
if ( ! ( is_home() || is_archive() || is_search() ) ) {
return;
}
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 );
}
.content .featured-image {
display: block;
min-height: 300px;
}
@media only screen and (max-width: 768px) {
.content .featured-image {
margin-bottom: 30px;
}
}
@media only screen and (max-width: 320px) {
.content .featured-image {
min-height: 200px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment