Adding a Gallery with Lightbox to a Template using ACF Gallery Field

[detailsguy]

Hi there,

I’m trying to add a gallery with a lightbox to a custom post template that will be used over a series of custom posts to display images within the “Gallery” field of each post.

I’ve tried setting up the “Gallery” field using ACF Pro but this seems to just be displaying a row of images without a Lightbox.

I also have The Grid plugin activated and I can see options on the Wordpress post settings to specify a type of gallery and to upload images but I’m not sure how to display it.

Screenshots of the post settings included below.

Any advice about how to make this work?

[ruenel]

Hello @BodhiJames,

Thanks for reaching out.

Please make sure that you have enabled the Lightbox in your grid settings. Kindly check out this documentation first:

• https://theme-one.com/docs/the-grid/#global_settings

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[detailsguy]

Yeah thanks, it looks like the gallery/lightbox is enabled. Will send the secure note over in a moment.

[ruenel]

Hello @BodhiJames,

Thanks for writing in!

Which of the ACF dynamic content did you add? You are suppose to insert {{dc:acf:post_field field="gallery"}} with a “Dynamic Content” looper. You may need to check this documentation first and look for the Gallery type to know how you can display the ACF Gallery type:

• https://theme.co/docs/acf-pro-and-loopers#multi-dimensional-fields

Best Regards.

[detailsguy]

Yes that is what I have there and it loops the images through but it doesn’t open a lightbox. The example of that is at the bottom of the example post I sent over to you.

But this still doesn’t allow me to display the gallery dynamically using The Grid so I can customize the lightbox. If you edit the example post, you will see that a grid skin is selected, the alternative media type is set to Gallery, and the images are even populated again under the gallery tab as per my screenshots in the original post.

[christian]

Hey @BodhiJames,

I’m sorry but I’m not sure why you’ll use The Grid plugin because its lightbox feature is only included if you actually use The Grid shortcode or element in the page. Yes, it’s possible to display images from The Grid meta but it will not include the lightbox.

With that said, let’s focus on the ACF setup and use Pro’s built-in lightbox. Before using the shortcode or giving you the shortcode setup, you first need to enable the Image element’s Link option. In the URL field, you need to insert the item Dynamic Content {{dc:looper:item}} like in the Doc shared previously. That makes your image link to the actual image file.

Now to the lightbox setup, you can assign a class to the Image element or simply use the x-image as the selector in the lightbox shortcode like this [lightbox selector=".x-image"]. Insert the shortcode in a Raw Content element preferably in a new section.

To see the list of the Pro Lightbox attributes, visit https://demo.theme.co/renew-1/shortcodes/responsive-lightbox/

You will want to use larger images though and not the thumbnail size.

I tested that setup and it works.

Hope that helps.