Images going through my head…

Namaste!

SO, you want a full-width header, but want it to populate with a new image each time the user visits? This tutorial will show you how to do that, plus how to use javascript to create a slider effect in your header. I chose to put together a demo of the later that you can see here, but the selection of the random image would look almost the same. As an example of using this to style a tab module, take a look here. This tutorial, as typical, is based on a request in one of the Facebook groups. The reason I’m showing how to create a slider effect is so you can alter this tutorial to put a shifting background onto most any element – even ones where you can’t place a slider. Let’s get started!

First up, make your normal Divi page with full-width header and other content. I recommend giving the full-width header a color neutral background because it will take a short time for your image to load. Next, go into your full-width header module settings (the three lines in the grey section). Navigate to the Custom CSS tab and give the module an ID of ‘headerSection’. This will allow us to target it with our javascript. Since we are not pre-loading an image into the background, you should give your header a defined height either in the main element styling box, or in your separate style sheet. I also give my header a class of ‘full-image’ while I’m here. Then to my style sheet I add:

.full-image {
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

Next, add in a code module on the page. You could also elect to use this script as a separate file and enqueue it, or put it into the Divi theme options. One thing I like about adding javascript by the code module is that it loads on just this page. So, if you don’t use this script on any other page, there is no sense in enqueuing it onto every post/page. We will start first with the simple task of selecting a random image using javascript and then assigning it to the header. In the code module, add the following:

<script>
jQuery(document).ready( function($){
	var imageArray = [
	'wp-content/uploads/2017/03/farm-one-opt.jpg',
	'wp-content/uploads/2017/03/farm-two-opt.jpg',
	'wp-content/uploads/2017/03/farm-three-opt.jpg',
	'wp-content/uploads/2017/03/farm-four-opt.jpg',
	'wp-content/uploads/2017/03/farm-five-opt.jpg',
	'wp-content/uploads/2017/03/farm-six-opt.jpg',
	'wp-content/uploads/2017/03/farm-seven-opt.jpg'
	],
	counter = 0;
	counter = Math.floor(Math.random() * 7);
	$( '#headerSection .et_pb_fullwidth_header' ).css("background-image", 'url(' + imageArray[counter] + ')');
});
</script>

Okay, let’s walk through the code. First up on line 1, we wait to start the function until the DOM is loaded. This is important because if we fire the script too early, the header won’t exist, yet. Next, I define a variable called ‘imageArray’ that has a list of the images that I want to choose from, in this case, a list of seven different images. You will have to look in your media library and adjust image names accordingly. I also create a counter and set the value to 0. 

Immediately following the creation of this counter I set it equal to a random number between 0 and 6. Wait, what — why 0 to 6? Remember, that arrays in javascript always start at 0, not 1. I accomplish this through using the ‘Math.random()’ function, which generates a number between 0 and 1, exclusive of 1. So to generate a random number between a min value and a max value (as long as they are zero or positive) use ‘Math.floor(Math.random()* (max – min +1)) + min’.

On the following line of code (line 14-15), I use jQuery to target the ‘headerSection’ ID that I added into my module settings. Then I change the background image for that section using ‘css()’. This function allows for you to change any CSS elements of your target. In this case I pass in the style element I want to change, ‘background-image’, followed by the path to the image. This would normally be passed in as, ‘url(pathToImage)’. In this case, I am concatenating a string that consists of three parts. First ‘url(‘, followed by a plus sign – which tells javascript to add the next part onto the existing string. Then I pull a value from the array based on the random number generated, and finally add on the closing parentheses. 

Okay, great. Now we have a function that will change the background image every time the user loads the page. What about if we want the image to change at a regular interval? Well, for the header we could simply use the slider module, but what if we were in some other module where we wanted the image to change? JS to the rescue!

We are going to make two changes to the JS above. First, we are going to preload out images so that they smoothly change, and second, we will add in a timer to fire regularly and change the image.

<script>
jQuery(document).ready( function($){
	var imageArray = [
	'wp-content/uploads/2017/03/farm-one-opt.jpg',
	'wp-content/uploads/2017/03/farm-two-opt.jpg',
	'wp-content/uploads/2017/03/farm-three-opt.jpg',
	'wp-content/uploads/2017/03/farm-four-opt.jpg',
	'wp-content/uploads/2017/03/farm-five-opt.jpg',
	'wp-content/uploads/2017/03/farm-six-opt.jpg',
	'wp-content/uploads/2017/03/farm-seven-opt.jpg'
	],
	bkgImage= [],
	counter = 0;
	imageArray.forEach(function( el, index ){
		bkgImage[index] = new Image;
		bkgImage[index].src = el;
	});
	window.setInterval( function(){
		++counter; 
		counter = ( counter === 7) ? 0 : counter;
		$( '#headerSection.et_pb_fullwidth_header' ).css("background-image", 'url(' + imageArray[counter] + ')');
	} , 5000 );
});
</script>

You can see that this code resembles that last very closely. We make our list of images, but then we have a ‘foreach()’ loop (lines 14-17). Basically what this bit of code is saying is that the browser should step through the array of images and “for each” load them into a new array. This has the effect of entering all of the images into the browser cache so we don’t have to wait for them to load when we ask to display them.

Now we use ‘setInterval()’ to change the background image. We do it the same way as above, using css(), but we add in a counter that increments until it is equal to 7, at which point it resets to 0. With setInterval(), the number after the comma is a time in milliseconds. So ‘5000’ means 5 seconds (1000ms = 1s). The great thing here is that we can change the jQuery selector to any element on our HTML page. Sliders everywhere!

The only other change I would make is to add in a background-image to the element you are targeting rather than a colored background, or nothing. That is because the script as written won’t fire immediately. So, if you set a background image for initial load, you won’t see a colored background followed by a series of images. There are ways around this, but I elected to keep the script as simple as possible.

As usual, if you have any problems getting this to work send me an e-mail or leave a comment. If you want a more in-depth explanation of anything I would be happy to oblige.  I hope this helps someone out with understanding the power of javascript a little more!

Metta!!