Updated on March 10, 2020
In the comments section of Multiple Backstretched Background Images for Front Page 1 widget area of Digital Pro via Soliloquy, a user asked:
I would love to use this method to display more background images in the Cafe Pro theme. I know you have a couple of tutorials on how to do that with a normal Soliliquy slider etc, but all those other methods mean that I have to give up on having the images fill the entire browser window. So, I figured this might be a good candidate.
I have tried for a while to get this to work on the Cafe Pro, but I must obviously be missing something. Any chance we can get a new tutorial like this one, except prepared for Cafe Pro?
In this tutorial we shall
- upload the desired background images to a Soliloquy slider named say, Front Page Header
soliloquy_outputfilter to store the slider's images into an array
wp_enqueue_scriptsaction hook to load Backstretch and pass the URLs of slide images to Backstretch initialization file if Front Page Header is present, otherwise the default image which can be changed in the customizer
to replace the static single background image behind the featured section (front page header) in Cafe Pro with cycling background images.
Tested in Cafe Pro 1.0.5.
Install and activate Soliloquy (the free lite or the premium one) plugin.
Create a slider named
Front Page Header and upload/select the desired background images. Since we are going to just use it as an easy way to manage the background images, settings in Config and Misc tabs do not matter and need not be configured.
Upload jquery.backstretch.min.js to
Create a file named say, backstretch-set.js in the same location having the following code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.