Lightbox Gallery showing Image Title, Caption and Description using ACF and GLightbox

This members-only tutorial provides the steps to set up responsive post-specific galleries in WordPress from images selected via ACF Pro Gallery component using GLightbox such that

• captions (if present) appear when hovering on images
• Image title and description appear in the lightbox

Note: While this tutorial was tested on a site running Oxygen, the instructions are generic and can be applied with a few modifications in any WordPress site.

Step 1

Install and activate Advanced Custom Fields Pro.

Create a field group having Gallery-type of custom field.

The field name has been set to gallery in this example.

Leave the Return Format as the default, Image Array.

Set it to appear when editing your desired post type entries, in this example - Page.

Step 2

Let us define a custom image size for the thumbnail images in the grid.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Custom Image Sizes

Code:

add_image_size( 'gallery_thumb', 630, 420, true );

If you are going to use images that are already present in the Media Gallery, regenerate thumbnails.

Step 3

Edit your Page(s) and select/upload images you want shown in the lightbox gallery.

Enter/edit Title, Caption and Description either by clicking on each image here or in the Media Library.

Step 4

Let's load GLightbox and activate it for the images being output as a grid (in the next step).

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.