This new feature lets you add a new type of ACF field to create an image gallery in a publication using images selected from the media library in the order of your choice.
To display the image gallery in the frontend, you can opt for a block shortcode with Guntenberg or use the EAC Advanced image gallery component in Elementor. From here, the gallery will be loaded from a dynamic ACF tag.
This feature is compatible with ACF/SCF plugins.
Pay attention: ACF image gallery page is not visible if ACF Pro is installed and active.
Enable the ACF Image Gallery feature
To enable the Image gallery feature, the free versions of ACF is installed and active.
You should be familiar with the Advanced Custom Fields plugin and the Dynamic Tags features of Elementor.
Pay attention: ACF Image Gallery field is not visible if ACF Pro is installed and active.
In the admin panel select EAC components settings page and Features tab. Enable the ACF Image gallery option and save settings.
Create a new ACF Image Gallery field
In the ACF plugin interface, create a new field group, then a new field with meaningful names.
Under the General tab, in the list of field type, under Content select the entry Image gallery.
Apply Location rules to an post type, post or category and save settings.
Also works with the Image Gallery field inside a layout field group.
As you know, you can also use the ACF Option pages to make your Image gallery global to your site and not attached to a particular publication.
To use Option Pages, follow this link.
Add an image gallery to a publication
Open the publication you’ve selected in Location Rules and you’ll find the section relating to the Gallery Image field previously created.
If this is not the case click on the three-dot menu in the top right corner of the screen then at the bottom Preferences, General tab, Advanced section and enable the ACF group name option.
Compose your image gallery from the Media library
The media library is filtered on gif, jpg, png, webp and avif images.
On your publication click on the Add Images button. In the modal box of the media library select the images in the order of your display preferences and click on the Add Images button.
You will then be able to move certain images without having to reopen the modal box.
After defining your gallery, don’t forget to save your work before leaving the post.
Publish an ACF image gallery with a Shortcode
In the Gutenberg editor, where you created the gallery, add a Shortcode block and add the attributes of the shortcode:
eac_image_gallery as shortcode name
field: the field name as indicated in the ACF group you created
id: post ID. Default the ID of the current post
size: image size (“full” | “thumbnail” | “medium” | “large”). Default “medium”
title: display title (“true” | “false”). Default “true”
fb: display images in a Lightbox (“true” | “false”). Default “false”
Type: display a gallery for a publication or from a user profile (“post”|”user”). Default “post”
The srcset, size and lazy load attributes are added to each image.
[eac_image_gallery field="image_gallery" id="post ID" size="medium" title="true"]
/* With default options */
[eac_image_gallery field="image_gallery"]
/* Display images in a Lightbox */
[eac_image_gallery field="image_gallery" fb="true"]
/* Display a gallery from a user profile */
[eac_image_gallery field="image_gallery_user" type="user"]
How to add custom link for each image
Good question, thanks for asking.
By default, each gallery item will be linked to the parent post if it exists.
You can find/create this link in the Media library screen in the ‘Downloaded to’ column, but you can also set custom link for each image in gallery. For more information, follow this link.
If you want to display images in a Lightbox, see previous section (Attribute ‘fb’). This attribute takes precedence over the link.
Accessibility of the ACF image gallery field
Tab / Shift-Tab keyboard keys to navigate between links
Home keyboard key to move focus to the first link
End keyboard key to move focus to the last link
Escape keyboard key exit the gallery
aria-label text 'View post + post title' on each link
Enter / Space keyboard keys to activate a link
Customize the gallery with your own style
Here are the default styles applied to the gallery.
You can apply your own style by modifying the classes defined for each tag, either with your theme’s customizer or with a plugin.
/* Gallery wrapper class */
.acf-gallery__container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-block: 20px;
}
/* Image wrapper class */
.acf-gallery__container-image {
position: relative;
display: block;
background-color: #fff;
border: 2px solid antiquewhite;
border-radius: 4px;
text-align: center;
overflow: hidden;
}
.acf-gallery__container-image a {
position: relative;
display: block;
block-size: 100%;
}
/* Image class */
.acf-gallery__image {
display: block;
position: relative;
block-size: auto;
inline-size: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* Title class */
.acf-gallery__caption {
position: relative;
padding-block: 10px;
padding-inline: 5px;
font-size: 1rem;
color: #1e73be;
word-wrap: break-word;
line-height: 1.2;
}
.acf-gallery__container a:not([data-fancybox]) .acf-gallery__caption {
color: red;
font-weight: 600;
}
.acf-gallery__container a:hover {
color: #1e73be;
}
/* Mode responsive */
@media (max-width: 880px) {
.acf-gallery__container {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 767px) {
.acf-gallery__container {
grid-template-columns: repeat(2, 1fr);
}
}Publish an ACF Image Gallery with Elementor
After creating and saving the gallery, open the post with the Elementor editor.
First you can also use the Shortcode widget at this stage, as described previously.
If you want more flexibility in customizing the image gallery, use the Advanced image gallery component.
To do this, find the Advanced image gallery widget in the EAC plugin, select the icon and drag and drop it into a container.
After that in the gallery section, select the wrench icon, then the EAC ACF/Image Gallery entry.
Hey,
Been try this feature, its work with shortcode, but its not with advanced image gallery, when i choose EAC ACF Image gallery, and try to select the key, the key that i create not appear on dropdown, any clue about this?
Hello James,
Sorry for the inconvenience
It’s difficult to assess the problem remotely, but if you’ve activated DEBUG mode, in the dashboard/Elementor/System info section Log at the bottom of the page, could you send me back any traces related to the ‘Advanced gallery’ widget or dynamic tags?
In your publication, in the Elementor editor, you can also add the Shortcode widget with the corresponding shortcode and see if the expected results are correct.
Rgds