Random rotating background image for Front Page 1 in Altitude Pro

In Genesis Slack chat a user asked,

Hi, all. I’m working with Altitude Pro and thinking about a customization to front-page-1. I’d like to rotate 3-4 background images there; not a slider but rather one image per session pulled randomly from an array. Has anyone done something like this?

In this tutorial, we shall

• upload the background images to a Soliloquy slider
• loop through this slider's images one by one and store all the URLs of slide images in an array, then return a random slide image URL in a function hooked to soliloquy_output filter
• get the URL of random slide image and store it in a variable using soliloquy() and set it as background image for .front-page-1 using wp_head action hook

If Soliloquy is not active or if Front Page 1 slider is not published, the default background image changeable via Customizer will continue to appear.

Step 1

Install and activate Soliloquy free or paid plugin.

Step 2

Create a slider named Front Page 1 and upload/select the desired Front Page 1 section's 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 Altitude Pro's functions.php: