Skip to content

Instantly share code, notes, and snippets.

@dividezigns
Last active February 15, 2023 16:53
Show Gist options
  • Save dividezigns/d9072065a6c70fdec1a33667e74c29b1 to your computer and use it in GitHub Desktop.
Save dividezigns/d9072065a6c70fdec1a33667e74c29b1 to your computer and use it in GitHub Desktop.
This code will use ACF's galley field with Divi's native gallery module. Place this code snippet in your single template file located in your child theme directory.
<?php
$columnNumber++
?>
<div class="et_pb_row et_pb_row_<?php echo $columnNumber++ ?> et_pb_gutters2 wcf_gallery_row">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_<?php echo $columnNumber++ ?>">
<div class="et_pb_module et_pb_gallery et_pb_gallery_<?php echo $columnNumber++ ?> et_pb_gallery_grid et_pb_bg_layout_light clearfix">
<div class="et_pb_gallery_items et_post_gallery clearfix" data-per_page="20">
<?php
$images = get_field('acf_gallery_field');
foreach($images as $image):
?>
<div class="et_pb_gallery_item et_pb_grid_item et_pb_bg_layout_light" style="display: block;">
<div class="et_pb_gallery_image landscape" style="display: table-cell">
<a href="<?php echo $image['url'];?>" title="gallery">
<img src="<?php echo $image['url'];?>" alt="gallery">
<span class="et_overlay et_pb_inline_icon" data-icon="U"></span>
</a>
</div>
</div>
<?php
endforeach;
?>
</div>
</div>
</div>
</div>
@uandidezign
Copy link

Don't click that link. Just copy and paste in your address bar.

@ilanm47
Copy link

ilanm47 commented Aug 19, 2019 via email

@uandidezign
Copy link

Wait, Apologies again. I forgot to add the ACF code snippet. Below is the updated file. https://dividezigns.com/wp-content/uploads/2019/08/single-project.php_-1.zip

@uandidezign
Copy link

uandidezign commented Aug 19, 2019

Also make sure to replace the name of your field get_field('acf_gallery_field');. So change 'acf_gallery_field' with whatever your field name is.

@ilanm47
Copy link

ilanm47 commented Aug 19, 2019 via email

@uandidezign
Copy link

uandidezign commented Aug 19, 2019

Oh I See. You want to incorporate with Divi builder. Then yes. It will have to go either above and below the builder code. If below, try placing the code right before <?php get_sidebar(); ?> tag. And just use the original code. Copy the original code for the parent theme of course.

@ilanm47
Copy link

ilanm47 commented Aug 19, 2019 via email

@gregm83
Copy link

gregm83 commented Jan 13, 2020

Hello Ilan,

I'm beginner with wordpress and divi.

I copied your snippet into my child theme in single-project.php just before get_sidebar to make my template project with divi theme builder. How can i add my acf gallery to the template ? With module texte and dynamic content ? With shortcode ? Because with module gallery it's impossible to add the acf field.. Sorry for my english, i just speak a litle bit. Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment