The Divi Gallery module is great for adding images to your posts and projects. But what if you'd like the convenience of creating a template for these posts / projects and dynamically populate the gallery module with images from an Advanced Custom Fields Pro gallery? Here's how you can configure a Divi Gallery module to load images from ACF Pro.
Load an ACF Gallery into a Divi Gallery Module using PHP Code
With a bit of PHP code, we can filter the Divi Gallery module attributes and replace the gallery ids with those loaded from ACF. But first, let's walk through an example setup to demonstrate this.
Step 1: Set up the Advanced Custom Fields Gallery Field
If you haven't already, install Advanced Custom Fields Pro (the free version of Advanced Custom Fields, while great, doesn't support galleries). Then create a new Field Group and set it up as shown:
Make sure your Field Type is set to "Gallery" and the return format is set to "Image Array". You can choose whatever Field Label and Field Name you like, but make a note of your Field Name as we'll need to reference it in our PHP code.
Now, below that, assign your field group to the location you want it to show up, e.g. posts, pages or projects. In this example, I'm going to set the field group to show on projects so that I can add an ACF gallery to any project custom post type I create:
Step 2: Add Images to your Gallery
If you now open one of your posts, pages or projects (depending on what you assigned your field group to) in the backend WordPress editor and below the post content you should see that ACF has added an area to upload your gallery images. Upload some images to it and it should look something like this:
Step 3: Set up your Theme Builder Template
If you haven't already done so, go to the Divi Theme Builder at "WP Dashboard > Divi > Theme Builder" and create a new template for your posts:
Assign the template to the posts or post types you want to display the template / gallery on. This should match the location you assigned your ACF field group to, above:
Now add a select to add a Custom Header, Body or Footer layout to your template depending on which part of the page you want to design in the template and open it for editing.
Step 4: Add your Gallery Module
Now, at the appropriate place in your template, add a Divi gallery module. We'll leave the gallery's Images field empty as our PHP code will automatically override this:
If you're not comfortable adding PHP code to your site, then at this point you might like to grab a copy of the Divi Dynamic Helper plugin from PeeAye Creative instead. Divi Dynamic Helper adds dynamic content support to the Images field of the Divi Gallery module, letting you select your ACF gallery from the dynamic content menu, instead of injecting it with the PHP code given below.
We'll give the gallery module a custom class "acf-gallery" that we'll use in our code to identify this gallery as one that should load ACF gallery images:
Note that the visual builder preview may display some images from your media library as placeholder content – but these will be replaced with ACF gallery images on the front end by the PHP code that we'll add next.
The only change you may need to make is to change "project_gallery" to the Field Name you assigned to your ACF gallery (if you set something different than that shown in my example).
Step 5: Add the PHP Code
Now that we've set up the ACF gallery and template with gallery module, let's add the PHP code that will connect the two. Add this PHP code to your site:
function divibooster_acf_gallery_ids($attrs) {
if (isset($attrs['module_class']) && strpos($attrs['module_class'], 'acf-gallery') !== false && function_exists('get_field')) {
$acf_gallery_images = get_field('project_gallery', get_the_ID());
if ($acf_gallery_images) {
$image_ids = [];
foreach ($acf_gallery_images as $image) {
$image_ids[] = $image['ID'];
}
$attrs['gallery_ids'] = implode(',', $image_ids);
}
}
return $attrs;
}
add_filter('et_pb_module_shortcode_attributes', 'divibooster_acf_gallery_ids');Related Post: Adding PHP to the Divi Theme
Step 6: View the Result
Now, go to the post (or page, project or other custom post type) whose ACF gallery you added images to in Step 2. View the page on the front-end and you should hopefully now see the gallery module displaying the images sourced from the ACF gallery, alongside the rest of your template and post content, e.g.:
Works perfectly!
Had to tweak one thing, the $image['ID'] in the foreach should be just $image.
Great! I'm glad it's working for you, Maurice – thanks for letting me know.
For the tweak, is your "Return Format" on the ACF field definition set to "Image ID" by any chance? My code assumes the "Image Array" format is used, for which the return value for each image is an array of data with the ID stored in an "ID" field. If you change the format to "Image ID" then the return value for each image is just the image ID, so your version would work for that. The Image ID option actually leads to need to neater code – you don't even need the foreach – but since "Image Array" is the default I went with that. But maybe I'm wrong and you're not using the "Image ID" format…?