Image Gallery For Pro ACF Plugin

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to set up an image gallery with the pro version of ACF

Step 1: Add Gallery Type Custom Field

Make your way to the Field Group in ACF associated with your desired Post Type. Add a Gallery Type Custom Field.

Step 2: Create A Single Post Template

Make your way to the Single Post Template in the Theme Builder where you would like to display an Image Gallery.

Step 3: Add & Customize The Gallery Slider Module

After adding the Gallery Slider/Module you will need to customize it by defining the Gallery Layout, ACF Gallery Type as the Pro version and ACF Gallery Name created in ACF as well as other options. For more information on this module please visit the Modules section in our documentation to your left.

Step 4: Build A Unique Grid Layout

From Machine 3.6 there has been the ability to build a unique grid of different sizes of images. To use this feature add images to your gallery as shown above. Next, open up the Grid Settings section of the module and there you will see a black box that says Grid Custom Code. 

Select Grid Gallery Layout

Grid Settings

In Grid Settings insert code (CSS) describing the arrangement of your images using THIS website here: grid.layoutit.com. For example, the image grid below is made using the following "mod" code. Please know that it is important to use "mod-" as the start of each of the grid elements.

More Support?

Please email us at [email protected] if you are unable to get Divi Machine working.