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.
Install and activate ACF Pro.
Add a field group having a Gallery type of field and set it to appear on posts.
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.
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
add_image_size( 'slider_image', 480, 300, true );
Save changes and activate.
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
Upload flickity.min.css to the plugin's
Upload flickity.pkgd.min.js to the plugin's
plugin.php and add the following inside the
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 );
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
PHP & HTML:
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $599 one-time).
Already a member? Log in below or here.