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.
Subscribe for new Genesis Tutorials
Yes, but you are hosted on WP Engine as you mentioned on “Tools” page and that make the difference. I’ll try to add slideshow background to one of my sites and measure the load time impact it has on the page. My site is on shared hosting.
Yep. The managed hosting from WPEngine is the best.
I don’t like hosting companies very much but i have to give these guys a big tick as they are very good with the speed.
Tried all other types and could never go back.
Adding background images to the page won’t slow down the page load time?
It will have some affect put that depends on your servers.
If you host on the super fast servers, you don’t have to worry about scripts or pretty much anything else.
I’m using multiple code blocks in nearly every posts and many of theme use Javascript because they’re hosted by Github however it has no negative affect on my page load times.
Hi Brad
You on WP Engine?
Hi Keith
At the moment.
How about yourself?
I’m on shared hosting with a host in the UK.
They have always been very helpful but recently I’ve started looking at WP Engine.
One of the problems with WPE is that they don’t provide email connected to your domain name – you have to go elsewhere.
That’s right
I use Google Apps however you could use Outlook.com to host your domains email account’s.
Whenever i visit your site it loads at a decent speed so maybe you don’t need to upgrade just yet.
Why are you looking at WPEngine?
Hi Brad
Thinking really about backups and security but the cost of a single site is pretty high.
If I liked it I might move some of my clients over.
Its cheaper than VPS and 3 times faster.
Every option looks expensive when you compare it to shared hosting.