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.
fg_post_typesfilter 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 1Install 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 2Upload jquery.backstretch.min.js to child theme's
jsdirectory. Create a filed named say,
backstretch-init.jsin the same location having this code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.