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:

Gallery field being populated for a CPT entry

CPT archive page:

Portfolio 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.

ACF field group having a Gallery-type of custom field

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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: