Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add this code to your functions.php file. This code will add the backstretch functionality to your theme which handles the loading and sizing of the images.
<?php
//* Do NOT include the opening php tag
//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'cegg_load_scripts_styles' );
function cegg_load_scripts_styles() {
if ( is_singular( array( 'post', 'page' ) ) && has_post_thumbnail() ) {
wp_enqueue_script( 'cegg-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'cegg-backstretch-set', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch-set.js' , array( 'jquery', 'cegg-backstretch' ), '1.0.0', true );
}
}
//* Localize backstretch script
add_action( 'genesis_after_entry', 'cegg_set_background_image' );
function cegg_set_background_image() {
$image = array( 'src' => has_post_thumbnail() ? genesis_get_image( array( 'format' => 'url' ) ) : '' );
wp_localize_script( 'cegg-backstretch-set', 'BackStretchImg', $image );
}
//* Hook entry background area
add_action( 'genesis_after_header', 'cegg_entry_background' );
function cegg_entry_background() {
if ( is_singular( 'post' ) || ( is_singular( 'page' ) && has_post_thumbnail() ) ) {
echo '<div class="entry-background"></div>';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment