Opens in a new tab
30th Apr '23
/
5 comments

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 633 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:
How to create custom colorthemes for your website with happyfiles

How to create custom colorthemes for your website with happyfiles

Happy Files is certainly known to many as the media management of the Wordpress media library, which is in dire need of improvement.
Developed by Thomas…
HappyFiles Bricks Query Loop

HappyFiles Bricks Query Loop

This tutorial explores different ways in which images from WordPress Media Library organized via HappyFiles can be pulled and shown in Bricks using query loop(s).…
Categories:
Pro
HappyFiles Folder Images via Meta Box Taxonomy Field in Bricks Image Gallery

HappyFiles Folder Images via Meta Box Taxonomy Field in Bricks Image Gallery

How to set the source of Bricks’ Image Gallery element on a post to images in the selected HappyFiles Folder(s) via a Meta Box Taxonomy…
How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

This tutorial series will review how to create a dynamic filterable image gallery using the IsotopeJS library‘s features in Bricks. Requirements Create a custom taxonomy for your…