Dynamic HappyFiles Gallery in Bricks with Meta Box or ACF Pro

Updated on 12 Jul 2023

This Pro tutorial provides the steps to show the images uploaded to an "Image Advanced" type of custom field created using Meta Box or "Gallery" type of custom field created using ACF Pro as a gallery using HappyFiles Pro in Bricks.

While Bricks does have an Image Gallery element, it does not have all the features possible in HappyFiles gallery, like showing image caption and thumbnail navigation in the lightbox.

Field group (screenshot when using Meta Box, with ACF the field type would be Gallery instead):

Field populated for the Page:

Page on the front end:

Meta Box

Step 1

Create a field group for your post type having an "Image Advanced" type of custom field with an ID of page_gallery.

Step 2

Edit your Pages and populate the custom field by selecting/uploading images from/to the media gallery.

Step 3

Define a custom function that is going to be used in the next step.

Add the following in child theme's functions.php or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 537 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Download Area with HappyFiles

Download Area with HappyFiles

Aside from the series I'm currently writing on how to create custom galleries and sliders with HappyFiles, Metabox and Bricks, I have developed a snippet…
Categories:
Adding Icon on Gallery Images in Bricks

Adding Icon on Gallery Images in Bricks

When lightbox is enabled for the images in Image Gallery element, it is probably a good idea to add a visual indicator to tell the…
Categories:
Pro
Configuring Image Gallery dynamic source in Bricks

Configuring Image Gallery dynamic source in Bricks

Let's say you have a custom field created with ACF Pro of the type Gallery called "Property Gallery" for posts of "Property" CPT. In the…
Output HappyFiles Folders in Metabox Select-Field

Output HappyFiles Folders in Metabox Select-Field

This tutorial is part of a series where I'm gonna show you how to output custom HappyFiles Galleries and Sliders. Part one will cover a…
Categories:
Pro
Displaying Gallery of SureCart Product Images with Bricks’ Query Loop

Displaying Gallery of SureCart Product Images with Bricks’ Query Loop

Custom query loop for looping through SureCart product images.
Categories:
Tags: