ACF Pro’s Gallery Field as a Slider in Oxygen

Updated on May 26, 2020

This members-only tutorial provides the steps to show how the images uploaded to a post via the Pro version of Advanced Custom Field plugin's Gallery field can be displayed as a slider/carousel using Flickity on single posts (or can be of any post type) in Oxygen.

Step 1

Install and activate ACF Pro.

Add a field group having a Gallery type of field and set it to appear on posts.

Step 2

Edit your posts and upload/select images in the Gallery field for each where needed.

We are going to set a condition on the Section in which images from the Gallery field will be pulled such that it will be output on the front end only the gallery field has been populated.

Step 3

Let us register a custom image size for the images in our slider.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Custom image sizes

Code:

add_image_size( 'slider_image', 480, 300, true );

Save changes and activate.

Step 4

Register custom handles for Flickity's CSS and JS so they can be loaded on demand.

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

Upload flickity.min.css to the plugin's assets/css directory.

Upload flickity.pkgd.min.js to the plugin's assets/js directory.

Edit plugin.php and add the following inside the custom_enqueue_files() function:

wp_register_style( 'flickity-css', plugin_dir_url( __FILE__ ) . 'assets/css/flickity.min.css' );

wp_register_script( 'flickity', plugin_dir_url( __FILE__ ) . 'assets/js/flickity.pkgd.min.js', '', '2.2.1', true );

Screenshot:

Step 5

Edit the Template that applies to singular posts.

Add a Section.

In my test site, I set it to be full-width with 0 padding on the left and right.

Add a condition. Select "Dynamic Data" from the conditions list > Post: Advanced Custom Field > Post Gallery > Output type: Images id list > INSERT. Select is_not_blank as the operator.

This will ensure that the Section will be printed on the front end only if there is at least 1 image in the gallery for the current post.

Add a Code Block.

Set its width to 100%.

Add the class of gallery-slider.

PHP & HTML: