The Divi FilterGrid plugin has a lot of click options available within the module settings including:
- None
- Link to post
- Show post in popup
- Show featured image in lightbox
- Show all featured images in lightbox gallery
- Open custom lightbox gallery
It’s the last option in the list above we’ll be paying attention to in this tutorial – Open custom lightbox gallery. Once this option is selected in the module’s settings (Content tab -> Posts Elements -> Click Action) a new field “Custom Field Name for Images” will display under the Click Action dropdown.
Here we can enter the name of a custom field that will contain an array of image URLs we want displayed in our custom lightbox gallery. Once you have this custom field name entered, you would simply edit each post (or any custom post type) that will get displayed in the grid and add this custom field multiple times, each time entering the URL of an image. This will create an array of images that will be used for the lightbox gallery. When the featured image for that post is clicked, the images in the custom field will get displayed in a lightbox gallery.
However, the images that are shown in the custom lightbox gallery do not need to come from a custom field. For example, they can also come from an Advanced Custom Field (ACF) “Gallery” field using the custom lightbox filter. This filter is already documented with examples. One of those examples shows how to display an ACF Gallery in the custom lightbox gallery.
As you can see, the custom lightbox gallery click action option is very versatile. Using the filter, you can display images from any source you want as long as you return them in an array format. In the example below, we’re going to show you how to display images from a Divi Gallery module located within each post.
Please add the following to your child theme’s functions.php file:
In the code above, we are finding the first gallery module from the post. Then we are extracting the image IDs that are found in the module’s shortcode. Once we have the image IDs, we are looping through each ID and using the built-in WordPress wp_get_attachment_image_url() function to get the corresponding image URL. Finally, we are returning this array of image URLs to be displayed in the lightbox gallery.
A slight variation of this would be to get the images from ALL gallery modules within the post. Please use the code below if you have multiple gallery modules in each post and want to display images from all gallery modules:
What I like most about the custom lightbox click action is the flexibility it brings. We’ve shown three examples how you can display a custom lightbox gallery for each post by populating the gallery with images from:
- A custom field
- An ACF Gallery field
- A Divi Gallery module
But you are not limited to the options above or to any single option above. For example, you could check if the post has a gallery module. If it does, display images from the gallery module in the lightbox. If not, check if the post has a custom field or ACF Gallery field. If it does, display images from one of those sources. If not, do nothing or display the featured image for that post. Lots of possibilities with this one 🙂
