Overview
If you have been wondering how to automatically add an image gallery in Divi with dynamic content from a custom field, rejoice! We have the solution! The Divi Dynamic Helper plugin by Pee-Aye Creative automatically adds a dynamic content icon to the default Divi Gallery module. This means you can add the standard Divi Gallery module to any page, post, or Theme Builder template and add images to custom fields, and the gallery will always display the correct images! Save yourself a lot of hassle, or just use this method to keep clients out of the builder. Our plugin is the only solution on the market for this, so we hope you appreciate and enjoy this exciting advanced feature!
This video and full written guide below will show you step by step how to set up the custom fields and use the new Divi Gallery module dynamic content setting.
1. Set Up The Custom Fields
Before you can automatically pull images into the Divi Gallery module with dynamic content, you must first set up the custom fields to provide a source for the images. Please refer to our Custom Fields documentation for more information about what custom fields are and how to set them up.
Supported/Tested Custom Fields
The Gallery module dynamic content feature is designed to work best with the Advanced Custom Fields (ACF) FREE version. This is the easiest and most convenient way to add images using an Image field type inside a Group field type (more information on this below). However, it will technically work with all custom fields plugins because it simply pulls in the image IDs from the field to the module.
Here is a list of tested and officially supported custom field options:
- WordPress Custom Fields
- Advanced Custom Fields Free Or PRO Gallery Field
- Pods (Using Images IDs, see below)
- Meta Box (Using Images IDs, see below)
- Toolset (Using Images IDs, see below)
Each of these methods were tested in the following scenarios:
- Gallery Module Added To Page Or Post
- Gallery Module Added To Divi Theme Builder Template Assigned To Page Or Post
Other plugins and custom field solutions and scenarios may work as well, but are not tested or guaranteed.
Using Advanced Custom Fields Pro Gallery Field
Due to very popular demand, we have added support for the Advanced Custom Fields (ACF) Pro Gallery field to show the images in the Divi Gallery modules with dynamic content. This of course requires the pro version of ACF. If you own this, then this is absolutely the simplest setup and easiest way to manage image galleries in Divi. Simply add a “Gallery” field to your ACF Field Group, connect the Divi Gallery module to the Gallery custom field, and add your images! You can check the version 1.1 release post video for more details.
Using Advanced Custom Fields (ACF) Image Group
The Gallery module dynamic content feature is designed to work best with the Advanced Custom Fields (ACF) plugin using Image files within a Group field. This is definitely the easiest method, and the one we recommend. This is the only solution on the market for making a gallery with ACF free version and Divi. The long-awaited solution is unique and innovative and solves a major problem for Divi users.
- Install and activate the Advanced Custom Fields plugin
- Create a Field Group
- Add a new field
- Set the Field Type to Group
- Within the Sub Fields, add a new field
- Set the Field Type to Image
- Add as many Image files as the maximum number of images you want to display in a gallery
Notice how the main Field Type is set to Group, and the Sub Fields then have multiple Field Types set to Image.
Once the fields are all set up, and the Field Group is assigned, you can go to the page or post and add images using the convenient file picker. Just click the Add Image button on each field!
The GIF below provides a brief visual overview of the simple steps needed to use this feature with the Advanced Custom Fields (ACF) plugin.
Using A Standard Custom Field With Image IDs
The alternative method to add images to the Divi Gallery modules with dynamic content is to use regular custom fields. This method can use the built-in WordPress custom fields or those from a plugin such as ACF, Pods, Meta Box, or Toolset. Our plugin code includes a little trick that combines image IDs added to a custom field separated by commas. Then in the Gallery module, this custom field is selected with the dynamic content and all the images represented by their IDs will be shown in the module.
The first step is to add a custom field which will be used for the image IDs. To learn how to add a custom field, please refer to our Custom Fields documentation. We recommend giving the custom field a descriptive name such as “Gallery Image IDs” or something like that.
After the custom field is set up, you can navigate to any page or post with the custom field and begin adding the IDs for the images you want to show in the gallery for that page or post. TIP: It will help to open a new tab for the next steps.
Here are the steps to find and paste the image IDs:
- Got the WordPress Media Library
- Click on an image that you would like to add to the gallery
- Copy the numbers from the ending of the URL slug in the address bar at the top of the page
- Paste the numbers (Image ID) into the custom field.
- Repeat as many times as you want. Separate each image ID by a comma.
2. Add/Open The Gallery Module
The next step is to add the Divi Gallery module to your layout. Simply go to your Visual Builder and click the gray plus (+) icon to add a new module and select the Gallery module. NOTE: If you already have a Gallery module in your layout, be sure to remove any existing images from the Content tab>Images toggle>Images field.
3. Click The Dynamic Icon Button
After adding a new Gallery module or removing any existing images from an existing Gallery module, you will see the new dynamic content icon in the upper right corner of the Images field. NOTE: This icon only appears when the Divi Dynamic Helper plugin is active.
4. Select The Custom Field
When you click the dynamic content icon, a new window will appear with a list of all the available custom fields on the site. Fields added via the standard WordPress editor or with plugins like Pods, Meta Box, and Toolset will appear under the gray “Custom Fields” heading, while fields added with the ACF plugin will appear under a separate section (fields from other plugins or custom-coded fields may appear either in the Custom Fields section or separate sections). You can now select the custom field that you have set up and designated for the gallery from step #1 above.
Using Advanced Custom Fields (ACF) Image Group
If you are using the ACF image group method, select any image from the group, and this will automatically load all the other images into the gallery as well.
NOTE: If you select a custom field from the list that is empty, no images will show in the gallery. Because of this, we recommend always selecting the first image in the group as the connected custom field, since most likely the first field would always contain an image.
The screenshot below shows how it will look when selecting the field (the custom field name will depend on whatever you have set in ACF).
The screenshot below shows how it will look after selecting the field.
Using A Standard Custom Field With Image IDs
If you are using this generic custom field method with the image IDs, simply select that field and all the images will load in the gallery. The screenshot below shows how it will look when selecting the field (the custom field name will depend on whatever you have set).
The screenshot below shows how it will look after selecting the field.
5. Save The Module Settings
At this point, you are finished with the setup. Be sure to save the module settings, and when you exit the builder, you will see the Divi Gallery module contains the images from the custom fields and can be viewed like usual. Everything else about the Gallery module can be adjusted according to your preference and will work just like normal.
6. Optional: Conditionally Hide Module
This last point is only if you face a scenario in which there may not always be images added to your custom fields. If there are no images added, then the default behavior in Divi is to show some random images from the Media Library. Ideally, you would want the module to hide. And Divi has a great way to do this with their Conditions feature. Please take a look at our tutorial here to see how to hide the module if there is no value entered. However, since the setup uses a parent group field and the child image fields, it is not working to add either of those field names in the Divi Conditions. However, if you combine the parent field name with the child name, it works! So if the parent group field has a name like gallery_image_group and the first image field in the group has a name like gallery_image_1, then you simply combine them and add an underscore in between like gallery_image_group_gallery_image_1. This then is the field name to use in the Divi Conditions per our tutorial.
Well done, you have completed the steps! Now go enjoy the result of this helpful plugin! Be sure to leave us a great 5-star review, it would be very helpful in spreading the word about our plugin. If you need any assistance, you can contact our support any time!