ACF Gallery Slider Lightboxes in Oxygen

This members-only tutorial provides the steps to set up Oxygen Easy Posts on a CPT archive with featured image opening a lightbox that shows images set in Advanced Custom Fields Gallery-type field as a slider for each post.

ACF Gallery field for Portfolio CPT:

CPT archive page:

When an entry's featured image is clicked:

For posts that do not have at least one image set in the gallery, we will show the featured image.

We shall use GLightbox for the lightbox and Flickity for the slider.

Step 1

Let us register a custom image size for the featured images and images in the lightboxes.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Custom image sizes

Code:

add_image_size( 'portfolio_lightbox_image', 800, 450, true );

Save changes and activate.

Step 2

Register your Custom Post Type (with archive enabled) either manually or using a plugin like Custom Post Type UI. In my test site, I used the Portfolio Post Type plugin.

Step 3

Install and activate ACF Pro.

Add a new field group having a Gallery type of field attached to your CPT.

Step 4

Add some CPT entries whilst populating (uploading to/selecting images) the gallery-type custom field and the featured image for each.

Step 5

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 glightbox.min.css and flickity.min.css to the plugin's assets/css directory.

Upload glightbox.min.js and flickity.pkgd.min.js to the plugin's assets/js directory. Create a file named say, glightbox-flickity-init.js in the same location having: