In the comments section of How to replace Home Section 1’s background image with Backstretch slideshow in Parallax Pro article, a user asked:
I used it on Altitude Pro also and changed “.home-section-1″ to “.front-page-1″ in backstretch-init.js and front-page.php. Awesome – thanks!
One question: I used the background: linear-gradient… styling that comes with Altitude Pro which really improves the look of my images. However, when the page is first loading, the unattractive gray gradient is the background until the first image loads. Do you have any suggestions on how to avoid that?
Thanks!
In this article I share how Backstretch can be applied on Altitude Pro homepage's body element to display a full screen slideshow with the page showing nothing but header and footer (optionally, 'Front Page 1' widget area can be populated). We shall use jQuery to dynamically add a div.linear-gradient that is initially hidden and having the linear gradient CSS below the backstretch div, followed by fading it in after the first background image appears.
Step 1
In functions.php comment out the lines that calls customize.php and output.php like so:
| //* Add Image upload and Color select to WordPress Theme Customizer | |
| // require_once( get_stylesheet_directory() . '/lib/customize.php' ); | |
| //* Include Customizer CSS | |
| // include_once( get_stylesheet_directory() . '/lib/output.php' ); |
and comment out the code that registers front page 2 to 7 widget areas like so:
| // genesis_register_sidebar( array( | |
| // 'id' => 'front-page-2', | |
| // 'name' => __( 'Front Page 2', 'altitude' ), | |
| // 'description' => __( 'This is the front page 2 section.', 'altitude' ), | |
| // ) ); | |
| // genesis_register_sidebar( array( | |
| // 'id' => 'front-page-3', | |
| // 'name' => __( 'Front Page 3', 'altitude' ), | |
| // 'description' => __( 'This is the front page 3 section.', 'altitude' ), | |
| // ) ); | |
| // genesis_register_sidebar( array( | |
| // 'id' => 'front-page-4', | |
| // 'name' => __( 'Front Page 4', 'altitude' ), | |
| // 'description' => __( 'This is the front page 4 section.', 'altitude' ), | |
| // ) ); | |
| // genesis_register_sidebar( array( | |
| // 'id' => 'front-page-5', | |
| // 'name' => __( 'Front Page 5', 'altitude' ), | |
| // 'description' => __( 'This is the front page 5 section.', 'altitude' ), | |
| // ) ); | |
| // genesis_register_sidebar( array( | |
| // 'id' => 'front-page-6', | |
| // 'name' => __( 'Front Page 6', 'altitude' ), | |
| // 'description' => __( 'This is the front page 6 section.', 'altitude' ), | |
| // ) ); | |
| // genesis_register_sidebar( array( | |
| // 'id' => 'front-page-7', | |
| // 'name' => __( 'Front Page 7', 'altitude' ), | |
| // 'description' => __( 'This is the front page 7 section.', 'altitude' ), | |
| // ) ); |
Step 2
Upload jquery.backstretch.min.js to js directory.
Step 3
Add
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Hello Sridhar,
Do you know if it is possible to add the background images dynamically?
I am thinking about using
wp_localize_scriptand a custom field with multiple values assigned to one key.What I don’t know is how to pass this info (array?) to the backstretch init script.
What would you suggest?
Thanks,
This works great for me, but I need my client to be able to update it. Would you consider creating a tutorial on how to do this using custom post types? Or how to use backstretch and Soliloquy to achieve a full screen homepage slideshow?
Hello Sridhar, I´d like to try this solution with a slider plugin too.
Thanks
Try https://sridharkatakam.com/how-to-replace-front-page-1-image-section-with-a-soliloquy-slider-in-altitude-pro/
Hi Sridhar, I tried this solution in a demo, here it is (http://grupomusical.apzproyectosweb.com/), but I have a problem with mobile menu in front-page when menu turns to black, it doesn´t work only in front page. ¿Could you help me?
Thanks
I see that, if I deactivate .linear-gradient css, everything is ok, but, is it the solution or i´m doing something wrong ?
Can you add the CSS for .linear-gradient back so I can see the problem?
Any luck getting this to work with Soliloquy?
https://sridharkatakam.com/slideshow-background-via-soliloquy-slider-using-backstretch-genesis/
Is it possible to have each slide link to a page, and put the name of the page and a Learn More Button to click on each slide?
How about using the backstretch and not commenting out widgets 2-7?