Support

Account

Register Login

Home › Forums › General Issues › populate divi gallery module with ACF

Solving

populate divi gallery module with ACF

  • does anyone have any idea what code to implement to insert images from an “ACF image gallery field” into the divi’s gallery module? with the standard wordpress gallery is easy(it is very here https://www.advancedcustomfields.com/resources/gallery/ )but with the divi gallery I have no idea where to start.

  • Hi Wassy, were you ever able to figure this out? I want to use the Gallery field with the Divi Gallery module to display the images. I’m pulling my hair out trying to figure it out!

  • yesssssssss but I’m out of home in this moment. I cannot past any code. in 2 words. you have to clone the standard divi module in your child theme and edit the id field that populates the divi gallery with the acf field. but you have to enable this custom module only in the cpt that you are interested to apply this kind of feature elsewhere this will breack the divi gallery in your entire website

  • How well you have found the solution!
    Could you illustrate us by putting the code please?

  • 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?
    have a nice day hope this helps you at least for a starting point

  • 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

  • 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

  • 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

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

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

  • 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!
    have a nice day hope this helps you at least for a starting point

  • 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 {

  • My friend 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

  • Thank you very much wassy83 !!
    You have exposed it very well, and the code works perfectly.

  • Wassy83, I think I’ve gone ahead or something I’ve done wrong. The gallery module (which I leave empty) shows me ALL the images in the library.

  • you are welcome

  • you told that it was working? have you changed something from the working configuration?
    I don’t think it is showing all the images it simply is receiving an empty arrey so is automatically populated with standard divi behaviour that is to populate the gallery with random images. First of all post the query that you have inserted instead of this one is_singular( array( 'custom-post-type' ) )
    and second of all check if the slug(not the name) of the ACF field is correct

  • Hi,

    The query that I have inserted instead of this one is_singular( array( ‘custom-post-type’ ) ) is:
    if ( is_singular( array( ‘galeria’ ) )

    And if the slug(not the name) of the ACF field is galeria.

    If I put [acf field="galeria"] , the result is:
    Array, Array, Array

  • is_singular( array( ‘custom-post-type’ ) ) is:
if ( is_singular( array( ‘galeria’ ) )

    sorry for the question but looks a little strange that you have your registered custom post type renamed exactly as your ACF gallery field.. in your case that query is a statement to apply the custom module on on single-galeria.php pages.is this present?

  • Actually I had what you put in your code:
    if (is_singular (array (‘mycpt’))
    I have changed it to “gallery” because I have misunderstood your instructions. So now I do not know what to do.

  • mycpt is a registered custom post type of mine, you have to decide in which pages you want this module to be enabled using the correct query, if you don’t know how to build a basic query I suggest to you to check the codex wordpress reference to build your own, if you don’t have custom post type you can use post instead of mycpt and in this case the custom module will be enabled in the classic wordpress articles

  • I do not want to create a custom post type. I have put “post” in place of yours “mycpt” but it still does not work.

  • Hi,
    I’ve followed all of the above steps, and I’m running into the same issue. I’m trying to add the ACF Gallery field on the “Projects” page. Everything appears to work, except the gallery is just loading 5 images at random from the site, not the ones I’ve highlighted using the ACF slug. Is there something I’m missing, or does this only work on custom post types?
    Thanks!

  • @brygal @kreatibu @kacftester

    if you are still searching a solution for this, I wrote a simpler way with few lines of code using the et_pb_module_shortcode_attributes hook, (unfortunately there is no documentation about this so you have to do things by yourself) just place in your functions.php child theme this and simply replace ‘galleria_struttura’ with your acf gallery name and ‘struttura’ with the custom post type that you want to populate with acf gallery (obviuously you can use any other wp_query for this, like is_page() etc)

    //populate divi gallery with ACF gallery 
add_filter('et_pb_module_shortcode_attributes', 'galleria_divi_acf', 20, 3);

function galleria_divi_acf($props, $atts, $slug) {
	$gallery_module_slugs = array('et_pb_gallery');
	if (!in_array($slug, $gallery_module_slugs)) {
		return $props;
	}
	if ( 'struttura' == get_post_type() ) {
	$props['gallery_ids'] = get_field('galleria_struttura', false, false);
		return $props;
	}
	else return $props;
}

    Regards

  • @wassy83 it only overides upon refreshing the Page in which we include the Divi gallery not called on runtime like When We add the Divi Gallery into the page only then function doesn’t run . . . . .

Viewing 25 posts - 1 through 25 (of 39 total)
1 2

The topic ‘populate divi gallery module with ACF’ is closed to new replies.