Skip to content

Instantly share code, notes, and snippets.

@dividezigns
Last active February 15, 2023 16:53
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

HI there,

Not quite. I assume you will be using 'Advanced Custom Fields' gallery module correct?

@ilanm47
Copy link

ilanm47 commented Aug 19, 2019 via email

@uandidezign
Copy link

lol, I'm saying "Correct" as in "Do I understand you correctly". Any who, Yes. The code snippet above will work. However, you're still missing some parts. Below will be the entire code for the 'single-project.php' file in your child theme directory.

`<?php

/* =====

Template Name: Single Project

===== */

get_header();

$classIncrement = 0;

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	
	<div class="entry-content">

		<div id="et-boc" class="et-boc">

			<div class="et_builder_inner_content et_pb_gutters3">

				<div class="et_pb_section et_section_regular">

					<div class="et_pb_row et_pb_gutters2 et_pb_row_fullwidth et_pb_row_4col">
						
						<?php
	                	if($custom_post_type_function ->have_posts()) {
						$i = 0;
	                    while($custom_post_type_function ->have_posts()): $custom_post_type_function ->the_post();?>
					
						<div class="et_pb_column et_pb_column_<?php echo $classIncrement++ ?> et_pb_column_1_4">

							<div class="et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_left">
					
								<div class="et_pb_text_inner">
									<h2><?php the_title();?></h2>
									<p>Custom Post Type Data.</p>
								</div>
				
							</div> <!-- .et_pb_text -->
							
						</div> <!-- .et_pb_column -->
	                    
	                    <?php
	                    $i++;
						if($i % 4 == 0) echo '</div><div class="et_pb_row et_pb_gutters2 et_pb_row_fullwidth et_pb_row_4col" >';
						endwhile;
						} 
						?>

				    </div> <!-- row -->

				</div> <!-- section -->

			</div> <!-- et-boc -->

		</div> <!-- et_builder_inner_content -->
         		
	</div> <!-- .entry-content -->

</article> <!-- .et_pb_post -->
`

@uandidezign
Copy link

uandidezign commented Aug 19, 2019

Wait, I just noticed embedding the code here didn't render the whole thing. Here is a downloable link to the file. https://dividezigns.com/wp-content/uploads/2019/08/single-project.php_.zip

@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