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:

if ( ! function_exists( 'bl_get_mb_image_ids' ) ) {
    function bl_get_mb_image_ids( $field_id ): string {
        // return a comma-separated string of image IDs from the array of keys of rwmb_meta( $field_id )
        return implode( ',', array_keys( rwmb_meta( $field_id ) ) );
    }
}

We are going to pass the field ID as an argument when calling the above function.

rwmb_meta( $field_id )

returns an array where the items are arrays themselves.

The things of interest for us are the array keys like 37 in the above screenshot which are the image IDs.

array_keys( rwmb_meta( $field_id ) )

returns an array that is made up of these image IDs like this:

implode( ',', array_keys( rwmb_meta( $field_id ) ) )

generates a comma-separated string of the above image IDs like this:

37,35,34,32,31,30

We need to pass this string to the HappyFiles shortcode.

Step 4

Edit your Page/template with Bricks.

HappyFiles Pro adds a useful “HappyFiles – Gallery” element in Bricks that provides a number of controls for configuring the gallery. But as of v1.8.2 of HappyFiles, this only works when the source of images is set to a folder that’s present/created earlier in the Media Library.

Even though there is a “Select dynamic data” input control it is not actually coded to work in the HappyFiles plugin. This might change in the future. So, for now, we need to work around this by using HF’s shortcode as detailed below on https://happyfiles.io/:

Add a Shortcode element having:

ACF

Step 1

Create a field group for your post type having an “Gallery” type of custom field with a Field Name of page_gallery.

Set the Return Format to Image ID.

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:

if ( ! function_exists( 'bl_get_acf_gallery_image_ids' ) ) {
	function bl_get_acf_gallery_image_ids( $field_id ): string {
			// return a comma-separated string of image IDs from the specified field
			return implode( ',', get_post_meta( get_the_ID(), $field_id, false )[0] );
	}
}

Step 4

Edit your Page/template with Bricks.

HappyFiles Pro adds a useful “HappyFiles – Gallery” element in Bricks that provides a number of controls for configuring the gallery. But as of v1.8.2 of HappyFiles, this only works when the source of images is set to a folder that’s present/created earlier in the Media Library.

Even though there is a “Select dynamic data” input control it is not actually coded to work in the HappyFiles plugin. This might change in the future. So, for now, we need to work around this by using HF’s shortcode as detailed below on https://happyfiles.io/:

Add a Shortcode element having:

Reference

https://docs.metabox.io/fields/image-advanced/#template-usage