In this post, i’ll show you how to display a slideshow of images which cover your entire background area.
We’ll be using the best Backstretch plugin which uses an excellent script to re-size background images.
StudioPress have added the Backstretch script manually in some of their child theme files for displaying a single background image however the WP Backstretch plugin enables you to display a slideshow using the same script and conditionally control which pages it displays on.
In the 1st example, we’ll display the slide show on the front page only.
After installing the plugin, you’ll need to add some code to your child themes functions.php file. This code needs to include the path to your images.
In this example, the code pulls the sample images from the demo folder in the plugin. You can replace these with your own if you wish and use this code otherwise you’ll find more code snippets after this one.
function front_page_slideshow( $images ) {
if ( !is_front_page() ) {
$images = array(
MY_DOMAIN.'/images/1.jpg',
MY_DOMAIN.'/images/2.jpg',
MY_DOMAIN.'/images/3.jpg',
);
}
return $images;
}
add_filter( 'backstretch_gallery_override', 'front_page_slideshow' );Change Display Conditions
All you need to do to change exactly where your slide show displays is change the conditional tag in the code.
This example will display your images on the background of all single posts and pulls the images from your child themes images folder.
function front_page_slideshow( $images ) {
if ( is_singular('post') ) {
$images = array(
get_bloginfo( 'stylesheet_directory' ).'/images/1.jpg',
get_bloginfo( 'stylesheet_directory' ).'/images/2.jpg',
get_bloginfo( 'stylesheet_directory' ).'/images/3.jpg',
);
}
return $images;
}
add_filter( 'backstretch_gallery_override', 'front_page_slideshow' );Load Images From Media Library
You can also change this code so it pulls your images from your media library.
Media Library Images
This code pulls your images from your media library and displays the slide show on the front page of your site regardless of what settings you have configured for your posts page in your Reading Settings.
function front_page_slideshow( $images ) {
if ( is_front_page() ) {
$images = array(
'http://example.com/wp-content/uploads/2013/10/1.jpg',
'http://example.com/wp-content/uploads/2013/10/2.jpg',
'http://example.com/wp-content/uploads/2013/10/3.jpg',
);
}
return $images;
}Home Page (Posts Page) Themes Images Folder
This code pulls your images from your child themes images folder and displays the background slideshow on your home page which may be your front page or blog page depending on what you have selected as your Posts Page in your Reading Settings.
function front_page_slideshow( $images ) {
if ( is_home() ) {
$images = array(
get_bloginfo( 'stylesheet_directory' ).'/images/1.jpg',
get_bloginfo( 'stylesheet_directory' ).'/images/2.jpg',
get_bloginfo( 'stylesheet_directory' ).'/images/3.jpg',
);
}
return $images;
}
add_filter( 'backstretch_gallery_override', 'front_page_slideshow' );Backstretch General Settings
You will also need to make sure you have selected the slideshow rather than single image using the plugins general settings.
Removing Demo Images
You may want to remove the demo folder from the plugin if you don’t want the demo images displaying on all other pages and posts. When using conditional tags in the code, the demo images will display on all other pages.
That’s it for this post however there’s a lot more which can be done as far as customization of this plugin is concerned.
The support from the Developer has been outstanding so if you need customization of this plugin, you know the best place to go.