Background Slideshow in Oxygen using ACF and Backstretch

This members-only developer-specific tutorial is a different way of achieving the same visual output as my previous post, Background Slideshow in Oxygen.

The focus here is on the implementation and the code part of it and not so much as the actual end result.

We shall

• add a Repeater field containing an image subfield on a custom admin settings page using ACF Pro
• In a function hooked to wp_enqueue_scripts inside a functionality plugin, load Backstretch, loop over the images uploaded on the settings page, store the image URLs in an array and pass this to JavaScript as the source to initialize Backstretch on the body tag using wp_localize_script()
• build a div in Oxygen and overlay it centered on top of the page.

Step 1

Install and activate Advanced Custom Fields Pro.

Install and activate Code Snippets plugin if you haven't already.

Add a new Snippet named say, "ACF Options Page" having:

if ( function_exists( 'acf_add_options_page' ) ) {

    acf_add_options_page();

}

Set it to run only in admin.

Step 2

Add a new Field Group named say, "Background Images Group" having a background_images Repeater.

Add a background_image image field inside the Repeater.

Leave the Return Value at the default, Image Array. The reason for not setting this to Image URL is because of the risk involved in giving the control to the clients who may upload huge images that are way too big (file size and dimensions-wise) than what is necessary. We shall register a custom image size and use the URLs of images sized to it.

Here's the export file of the field group.

Step 3

Install and activate my custom functionality plugin.

Step 4

Upload jquery.backstretch.min.js to wp-content/plugins/my-custom-functionality/assets/js.

Create a file named say, backstretch-init.js in the same location having the following:

(function ($) {

    $('body').backstretch(BackStretchImg.src, {
        duration: 4000, // amount of time in between slides in milliseconds. Default: 5000
        fade: 750,
    });

})(jQuery);

Step 5

Edit plugin's plugin.php.

a) Add

add_image_size( 'background-image', 1600, 900, true );

Regenerate thumbnails if necessary.

b) Inside custom_enqueue_files(), add