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>
@ilanm47
Copy link

ilanm47 commented Aug 19, 2019

Hi,
I'm looking desperately for such a solution for a Divi project page.
I'm not a PHP savvy, should I copy the single-project.php to my child folder, erase what in it and paste your code?

@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