Random image from Soliloquy slider as full-sized background in WordPress using Backstretch

In the comments section of Setting a random full-sized background image in WordPress using Backstretch tutorial, a user asked:

Is there a way to make it choose from images in a gallery so that the client more easily add images without having to get at the files?

In this tutorial I show how a single random image from images uploaded to a Soliloquy slider can be shown as full size background image in the front-end using Backstretch jQuery script. When any page in the front-end is visited or reloaded, one of the slider images will be picked randomly and shown as its background.

Summary of steps:

• Create a "Background Images" Soliloquy slider and upload/select the desired images from which one should be used randomly.
• In a function hooked to soliloquy_output filter, loop through all the images in the above slider one by one, store them in an array and return the URL of a random image.
• Enqueue Backstretch and initialize it using the above URL sent from PHP to the .js file using wp_localize_script.

Sample screenshots:

when the same page is reloaded:

Screencast:

Step 1

Install and activate Soliloquy.

Step 2

Create a slider named say, "Background Images" 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.

Step 3

Add the following in child theme's functions.php: