Add Multiple Site Background Images To Genesis Agency Pro Theme

December 2, 2015 -

You can add a multiple images as alternating site background images in the Genesis Agency Pro theme by tweaking the backstretch jQuery plugin that comes with the theme.

Out of the box Agency Pro uses one master site background image as set in the Customizer, preferably at 1600 x 1000px.

Prepare your images

Get your images ready at 1600 x 1000px and file them either in the uploader or in an images directory, have their URLs handy.

Create a Background Slider

Edit the main Backstretch function

<?php
//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {
// $image = get_option( 'agency-backstretch-image', sprintf( '%s/images/bg.jpg', get_stylesheet_directory_uri() ) );
//* Load scripts only if custom backstretch image is being used
//if ( ! empty( $image ) ) {
wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );
//wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );
// }
}
view raw agencypro.php hosted with ❤ by GitHub

Edit the main backstretch function in functions.php as above I have commented out the lines I no longer need, this is the code the ties the customizer image to the Backstretch jQuery plugin.

Edit the Backstretch script

In your js/backstretch-set.js file add the following…

jQuery(document).ready(function($) {
$("body.home").backstretch([
'/wp-content/themes/dmand/images/bg.jpg',
'/wp-content/themes/mytheme/images/bg1.jpg',
'/wp-content/themes/mytheme/images/bg2.jpg',
'/wp-content/themes/mytheme/images/bg3.jpg',
],{
duration:3000,
fade:750,
});
});
view raw backstretch-set.js hosted with ❤ by GitHub

So here just add in your images and correct paths – and that’s it done.

Load Alternate Images on Page Load

Instead of a slider you could also load different background images each time the page loads, to do this edit the backstretch script to be like the below.

jQuery(document).ready(function($) {
// Create an array of images that you'd like to use
var images = [
'/wp-content/themes/dmand/images/bg.jpg',
'/wp-content/themes/dmand/images/bg1.jpg',
'/wp-content/themes/dmand/images/bg2.jpg',
'/wp-content/themes/dmand/images/bg3.jpg',
];
// Get a random number between 0 and the number of images
var randomNumber = Math.floor( Math.random() * images.length );
// Use the random number to load a random image
$("body.home").backstretch([
images[randomNumber],
],{
duration:3000,
fade:750,
});
});
//Source - https://github.com/srobbin/jquery-backstretch/issues/135
view raw backstretch-set-alternate.js hosted with ❤ by GitHub

Related Posts:

Categorized WordPress Tagged , , ,