• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Display Background Image Slide Show Conditionally

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.

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.

Download WP Backstretch

Reader Interactions

Comments

  1. Zimbrul says

    October 15, 2013 at 7:35 pm

    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.

    Log in to Reply
    • Brad Dalton says

      October 15, 2013 at 11:48 pm

      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.

      Log in to Reply
  2. Zimbrul says

    October 15, 2013 at 5:31 pm

    Adding background images to the page won’t slow down the page load time?

    Log in to Reply
    • Brad Dalton says

      October 15, 2013 at 5:58 pm

      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.

      Log in to Reply
      • Keith Davis says

        October 15, 2013 at 8:02 pm

        Hi Brad
        You on WP Engine?

        Log in to Reply
        • Brad Dalton says

          October 15, 2013 at 11:45 pm

          Hi Keith

          At the moment.

          How about yourself?

          Log in to Reply
          • Keith Davis says

            October 16, 2013 at 7:15 pm

            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.

          • Brad Dalton says

            October 17, 2013 at 2:54 am

            That’s right

            I use Google Apps however you could use Outlook.com to host your domains email account’s.

          • Brad Dalton says

            October 17, 2013 at 4:55 am

            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?

          • Keith Davis says

            October 17, 2013 at 3:53 pm

            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.

          • Brad Dalton says

            October 18, 2013 at 7:40 am

            Its cheaper than VPS and 3 times faster.

            Every option looks expensive when you compare it to shared hosting.

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems