Support

Account

Home Forums General Issues populate divi gallery module with ACF Reply To: populate divi gallery module with ACF

  • Hi my friend @kreatibu,
    I wil tell you how to accomplish this,is not so difficoult:
    first of all you need an update divi environment with your custom child theme enabled and obviously the latest ACF plugin installed.

    Then you have to create your ACF gallery field(let’s suppose to name it divi_acf_gallery).

    now you have to create your custom divi module that will automatically populate the images from the divi_acf_gallery field.

    Create in your child theme a file named “custom-acf-gallery-module.php” and be sure to add the correct permission/owner/group if you have a local setup/VPS/private server, open it with your preferred editor like notepad++ and past exactly the entire content of the standard gallery module(you can find this in /wp-content/themes/Divi/include/builder/module/Gallery.php

    Now you have to customize the module with your ACF field, this can be done in 3 steps:

    FIRST STEP
    on top of the file you have this code

    <?php
    
    class ET_Builder_Module_Gallery extends ET_Builder_Module {

    simply edit as follow to begin your own custom function that we then enqueue to our functions

    <?php
    function ex_divi_child_theme_setup() {
      if ( class_exists('ET_Builder_Module')) {
    	  
        class ET_Builder_Module_Gallery_ACF extends ET_Builder_Module {

    SECOND STEP
    go around line 407 and change the code in this way

    		$attachments_args = array(
    			'include'        => get_field('divi_acf_gallery', false, false),
    			'post_status'    => 'inherit',
    			'post_type'      => 'attachment',
    			'post_mime_type' => 'image',
    			'order'          => 'ASC',
    			'orderby'        => 'post__in',
    		);
    

    you can notice that the query now gets the arrey of images from the acf field

    THIRD STEP
    go at the and of the file and you will find this code
    new ET_Builder_Module_Gallery;
    Delete this line and add this code

    if ( is_singular( array( 'mycpt' ) ) ) {
    	$et_builder_module_gallery_acf = new ET_Builder_Module_Gallery_ACF();
        remove_shortcode( 'et_pb_gallery');
        add_shortcode( 'et_pb_gallery', array($et_builder_module_gallery_acf, '_shortcode_callback') );
      }
      }
    }
    add_action('et_builder_ready', 'ex_divi_child_theme_setup');

    this is one is an important step, you have to choice were this custom module will appears, so in my example the query
    is_singular( array( 'custom-post-type' ) )
    is the most important, in my case tells that if the module is present in a custom post type named “mycpt” then the gallery will be populated by the ACF field, elsewere the function will use the standard divi engine, this is good cause gives to you the ability to clone the standard divi module without hacking it, this is simple a customized copy that will work forever on your selected pages,and will note breack the standard divi gallery pages. you can of course customize the query for a specific page like this
    is_page( array( ‘page-1’, ‘page-2’, ‘page-3’ )

    The latest step is to enqueue this in your functions.php file with a simple line of code that you can comment anytime out if things goes wrong or if you want to disable this feature

    include (get_stylesheet_directory() . '/custom-acf-gallery-module.php');

    DONE!

    Sorry I’m not a coder, I have only patience it takes me an entire day to find this out but is working as expected, I don’t know if is bad to enqueue the custom php in this way, maybe is better to add the if statment in the functions.php to enqueue this only on the cpt pages, but is only 21k and my sites loads fast so who cares?

    Now you can add the gallery module to your pages without adding any image and if are the selected ones on save you will notice that are automatically populated, the VB cannot render this but is not important at all.

    have a nice day hope this helps you at least for a starting point