Title hero section in Genesis with rotating background images using Featured Galleries and Backstretch

I have written a few tutorials on sending the Soliloquy slider images on to Backstretch for rotating the background images of sections.

Yesterday I found out that it is better and easier to use Featured Galleries instead of Soliloquy for the same.

We can set singular pages of various post types to have their own set of rotating background images.

In this tutorial, we shall

• set multiple images using the Featured Galleries plugin
• define a custom image size for images in Featured Galleries
• in a function hooked to `wp_enqueue_scripts`, check if a Featured Gallery is present and if so, load Backstretch and pass an JSON encoded array of that entry's Featured Gallery image URLs to Backstretch
• parse the JSON array of images in the Backstretch initialization js file
• in a function hooked to `genesis_after_header`, check to see if the entry has a Featured Gallery and if so remove the entry header from its default location and add it inside a custom div.featured-gallery that has been set as the "backstretched" element.

for posts and Pages in Genesis. It is possible to make this work for any post type using the fg_post_types filter as mentioned on the plugin's page.

Posts and Pages that do not have at least 1 image in their Featured Gallery will be set to appear as before.

Step 1

Install and activate Featured Galleries.

Edit your Posts/Pages for which you'd like to set the title hero section and upload your desired images in the Featured Gallery metabox.

Step 2

Upload jquery.backstretch.min.js to child theme's js directory.

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