Post/Page-Specific Background Slideshow in Bricks using Backstretch

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:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get full access to all 220+ Bricks tutorials with BricksLabs Pro

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’];
    }
    }

Leave your comment