This Pro tutorial provides the steps to load and initialize Backstretch on the images uploaded to a post (of any post type like Pages or CPT) using ACF Pro on the page header section with the post title overlayed in the center for a background slideshow in Bricks.
Note: Another way to get the same visual result is by possibly using the built-in Slider element. We may explore and cover this in another tutorial.
Step 1
Install and activate ACF Pro.
We are going to use a Gallery type of field.
Go to Custom Fields → Add New to create a new field group named say, "Page Fields".
Add a field having the label of "Background Slideshow Images" and press Tab to have the Field Name automatically be set to background_slideshow_images.
Set the Field Type to Gallery.
Leave the Return Format at the default, Image Array.
In the Location meta box, select your desired Post Type - in this example, Page.
Step 2
Edit your Pages and for each, upload the slideshow images by populating the Gallery field.
Step 3
Create a directory called assets in your child theme and inside that, js directory.
Upload jquery.backstretch.min.js to your child theme's assets/js directory.
Ex.: /wp-content/themes/bricks-child/assets/js/backstretch-init.js
Create a file named say, backstretch-init.js in the same location having the following:
2 comments
Frédéric Chamsseddine
Hi!
For use with Metabox instead of ACF, replace
// load the custom field value
$images = get_field( ‘background_slideshow_images’ );
if ( $images ) {
// loop through the images and store the URLs in our variable
foreach( $images as $image ) {
$image_urls[] = esc_url( $image[‘sizes’][‘background_image’] );
}
}
By
// load the custom field value
$images = rwmb_meta( ‘header_background_images’, [‘size’ => ‘background_image’] );
if ( $images ) {
foreach( $images as $image ) {
$image_urls[] = $image[‘url’];
}
}
Sridhar Katakam
Thanks for sharing that Frédéric.
WP converts single quotes into useless smart quotes.
Here’s your code that won’t break when pasted: https://pastebin.com/raw/yd1eXhiG