Background Slideshow in Oxygen using Meta Box and Backstretch

This members-only tutorial provides the steps to send the images uploaded to Meta Box "Image Advanced"-type of custom field to Backstretch for setting up a background slideshow of a section in Oxygen.

This is similar to the earlier Background Slideshow in Oxygen using ACF and Backstretch tutorial but instead of a fields group attached to an Options page, we shall use one field group attached to posts.

We can thus have a post-specific background image slideshow.

Step 1

Install and activate Meta Box and Meta Box AIO.

Go to Meta Box > Custom Fields and add a new field group having a field of the type "Image Advanced".

Under Settings, set the location to your desired post type - in this example, post.

Step 2

Edit your posts and for each, select/upload the images to be shown when that post's single page is viewed on the front end.

Step 3

Install and activate My Custom Functionality plugin.

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

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