How to add a slider to the top home page area but also keep a background image?

[kristionne]

FYI: I am using genesis extender to control the widgets on the home page and I am NOT using the theme for a real estate related site. I am actually using it for a church. Great theme!!

I know I would have to add some code to the functions.php and likely have to place the background image in the WP image files to reference the background image as a url, but I am not sure what code to use to get a home slider widget without loosing the background image I have and getting it to work with the Genesis extender. Please help.

Thanks!

---

[Carrie Dils]

Hello,

You might be interested in these tutorials:

Full width Soliloquy slider in Genesis

How to replace background image in Minimum Pro with responsive slider

You’d need to modify a little depending on what slider plugin you want to use, but that should get you in the right direction. 🙂

Cheers,
Carrie

---

[Lorikb]

I did this recently with this theme, this is how I did it:

In functions.php I found the Backsretch scripts function and added this instead.

if ( is_front_page() ) {
	if ( get_background_image() ) {
		wp_enqueue_script( 'wap-backstretch', get_stylesheet_directory_uri() . '/lib/js/backstretch.js', array( 'jquery' ), '1.0.0' );
		wp_enqueue_script( 'wap-backstretch-set', get_stylesheet_directory_uri() .'/lib/js/backstretch-set.js' , array( 'jquery', 'wap-backstretch' ), '1.0.0' );
		wp_localize_script( 'wap-backstretch-set', 'BackStretchImg', array( 'src' => get_background_image() ) );
	}
} else {
		wp_enqueue_script( 'wap-backstretch', get_stylesheet_directory_uri() . '/lib/js/backstretch.js', array( 'jquery' ), '1.0.0' );
		wp_enqueue_script( 'wap-backstretch-set', get_stylesheet_directory_uri() .'/lib/js/backstretch-set-single.js' , array( 'jquery', 'wap-backstretch' ), '1.0.0' );
		wp_localize_script( 'wap-backstretch-set', 'BackStretchImg', array( 'src' => get_background_image() ) );
} }

Then I created a copy of lib/js/backstretch-set.js and named it backstretch-set-single.js

In the original backstretch-set.js I added my other images I wanted in the slide show on the homepage. BackStretchImg.src is the background uploaded via the wordpress admin theme settings.

jQuery(document).ready(function($) {
	$("body").backstretch([
	BackStretchImg.src
	, "SLIDE TWO IMAGE URL"
	, "SLIDE THREE IMAGE URL"
	],{duration:5000,fade:1050});
});

In backstretch-set-single.js I put the image I wanted to be the background on the rest of the site.

jQuery(document).ready(function($) {
	$("body").backstretch([
	"IMAGE URL"
	],{duration:5000,fade:850});
});

What this did was give me a slide show on the homepage and a static background on anything that wasn’t the homepage.

Hope this helps,
Lori

---

[Ginger Coolidge]

Wow, thanks so much for sharing your code Lori! Great forum participation…plus I’m totally going to copy your code examples for my site as well 🙂

---

[kristionne]

WOW! Thanks everyone! I am going to use your code as well Lori. Let’s hope I don’t make a mess..LOL ;0)

---

[kristionne]

Lori (or anyone that wants to comment),

I got it work however, i have one question… Can this be done where the slider is a specific size with the solid background and easy for the end user to change?

I will check our Carrie’s links in the interim.

Here is the link to the site I am building if that will help.

http://www.golivelaunch.com

THANK YOU ALL SOOOO MUCH IN ADVANCE!!

---

[klutchtech]

Lori, thank you so much for sharing your code, that worked well for our website!

---

[XavierIntan]

Thank you Lorikb it works well for my web site zoom.baliradar.com

Do you have an idea how I could add an hyperlink on the images of the slider (link the images towards another page when a user click on it) ?

Thank you very much

Xavier

---

[Author]

Posts