Show ACF Gallery Images in a Divi Gallery Module

|

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 above.

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');

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.:

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.