How to replace Front Page 1 background image in Monochrome Pro with rotating images using Backstretch and Soliloquy

In the members-only forum a user asked:

Hi Sridhar!

I’m hoping to implement the rotating slideshow of homepage background images via backstretch/soliloquy as you have with several of the Genesis child themes. My site is using the Monochrome Pro theme. Could you either refer me to the best existing tutorial (and note any modifications needed), or perhaps create a new tutorial for Monochrome?

Many thanks

This tutorial covers the steps to

• use `soliloquy_output` filter hook to check for the Front Page 1 Soliloquy slider, loop through the slide images, store all the URLs of slide images in an array and return an encoded JSON string
• load and initialize Backstretch on the homepage, use `wp_localize_script()` to pass the JSON string having slide URLs to the Backstretch initialization file.

resulting in images present in the Front Page 1 Soliloquy slider to rotate smoothly as the background for Front Page 1 section.

Step 1

Install and activate Soliloquy (free lite or the premium one) plugin.

Create a slider named Front Page 1 Slider 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/Misc tabs do not matter and need not be configured.

Step 2

Create a file named say, backstretch-init.js in the same location having the following code: