July 23, 2017: Here's an easier method for doing the same by using Featured Galleries plugin instead of Soliloquy.
In this tutorial, we shall replace the single background image for Front Page 1 section in Infinity Pro with a set of images uploaded to a Soliloquy slider (free or commercial) and displayed with a fading effect one after the other, cycling via Backstretch.
If Soliloquy is not active or if a slider named "Front Page 1" is not present in published status, the default background image (bg-1.jpg, changeable via the customizer) will continue to appear.
Step 1
Install and activate Soliloquy (free lite or the premium one) plugin.
Create a slider named Front Page 1 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, Mobile and Misc tabs do not matter and need not be configured.
Step 2
Upload jquery.backstretch.min.js to js directory.
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.
To set the speed and fade speed. This is the area that needs to be modified?
duration: 3000,
fade: 750
Yes.
If you get a chance, can you let us know if 256studio’s problem is fixable. I was thinking the simplest would be to turn off the slider for mobile, doable?
I noticed while viewing my website in mobile view I see the next slider above the menu.
Here is a screen shot.
https://www.dropbox.com/s/aker3aa6b5gz459/IMG_0271.PNG?dl=0
link: https://www.scotbirchfield.com/
Hi Scott, I see that on mobile the main image does not rotate, just the area above the menu. So, like a stopped clock, it is right only once in awhile, when the image in the slider matches the rotating image. I’d love to know how you and Sridhar fix this, if you can fix this. 🙂
I have updated the tutorial and added Step 5 which should hopefully fix this.
Give it a try.
Here’s a live demo: http://infinity.wpdemos.co/
I’ve made a couple of CSS changes in a test site regarding this.
Can you check if the problem is still present for this site? http://infinity.wpdemos.co/
Awesome!
Can we use this code with Altitude pro ?
I remember you did something similar but It worked with soliloquy premium.
Thanks
Yes. Just tested and this works fine for Altitude Pro as well. Step 5 is not needed/applicable.
In Step 4 it’d be altitude_front_page_genesis_meta() instead of infinity_front_page_genesis_meta().
Thanks for all
It work´s ok.
Thanks again
Thank you for fixing the small issue I pointed out. Works like a champ on my localhost. I will be moving this to my site very soon.
-Scot
Would this work for Utility Pro?
The image is a background on the whole page but only visible at certain sections
Sridhar- I have not been able to get this to work. I was so excited and have stepped through all of your steps.
Am I missing something? I have the Solilo slider, etc.
http://www.napaseafoodsummit.com/
Any ideas?
-Elisa.
I was able to get this to work on one Infinity Pro site, but not the other. The first was a site I inherited, when I really should just rebuild it, especially since it works fine on one, not the other. Can’t wait to try the fade addition. Thanks Sridhar!
Hi Sridhar
I have also followed all the steps and get get this working. Any ideas?
The site is http://boostsearches.com/magen/
Seems to be working fine.
I followed this step by step, but it will not work. It shrinks the area down and does not give me the slider at all. I have created the slider in Soliloquy and called it Front Page 1. I created both the .js files and they are saved in the js folder. I copied and pasted the code for the child themes function.php and then I copied the entire code you shared for the front-page.php. You can see what it is doing here, http://demo.forwardmotiondesigns.com. Thanks for the help.
I went through and deleted all the files I had created or changed and recreated them all and now I just get the original background image without the slider appearing. I’m at a loss. I have gone back through functions.php, front-page.php, backstretch-set.js, jquery.backstretch.min.js and style-front.css to make sure they all match what you have above and they do. Not sure where to go from here.
Can you send me the WP and FTP logins via https://sridharkatakam.com/contact/? Do mention a link to this post or your comment in your message.
Fixed.
In the code to be added in functions.php, you need to replace 529 with the ID of your slider. I changed it to 65 and it works now.
Thank you very much Sridhar! I now see I missed that note in your code. Looking at all the big picture stuff and missed the little details. Lesson learned. Thanks for all your excellent tutorials! They have saved me many times over.
I have found two more issues I am having with how this shows on mobile. When looking at this at full mobile width, the slider is not adjusting the height, so it is showing only a small portion of the images. But, when I look at it with my phone or browser window in the portrait position, the image adjusts to the right height. How can I fix this. Secondly, I am noticing that it is pushing my front-page 2 widget down and there is a lot of extra white space between the slider and the content now when looking at it on mobile. What is causing this issue? Thank you for your help. My demo site is http://demo.forwardmotiondesigns.com.
I need to achieve the same (I’m using Infinity Pro) but would like to remove the widget area and keep the ability to add Soliloquy captions to each slide. Would I need to follow a different tutorial?
Follow this just published tutorial: https://sridharkatakam.com/front-page-1-soliloquy-slider-in-infinity-pro/
Thank you Sridhar, perfect!
[…] the comments section of How to replace Front Page 1 background image in Infinity Pro with rotating images using Backstretch …, a user […]