ACPT Gallery Field Query Loop in Bricks

This Pro tutorial provides the steps to output images selected in a ACPT‘s Gallery-type field for posts as a grid using a Bricks query loop.

Step 1

Create a field group attached to your desired post type (page in this example) having a Gallery field.

In the above screenshot,

• page-fields is the field group name (slug)
• page-meta is the box name (slug)
• page-gallery is the field name (slug)

Step 2

Edit the post(s) to which the field group is attached and populate the field.

Step 3

Edit your Page/template with Bricks.

Copy this JSON of a basic/starter Section and paste.

LI Block element’s PHP query code:

$gallery = get_acpt_field([
	'post_id' => get_the_ID(),
	'box_name' => 'page-meta',
	'field_name' => 'page-gallery'
]);

$ids = [];

if ( is_array( $gallery ) && ! empty( $gallery ) ) {
	$ids = array_map( function( $attachment ) {
		return $attachment->getId();
	}, $gallery );
}

if ( is_array( $ids ) && ! empty( $ids ) ) {
	return [
		'post_type' => 'attachment',
		'post_status' => 'inherit',
		'posts_per_page' => 100, // a large number
		'no_found_rows' => true,
		'post__in' => $ids,
		'orderby' => 'post__in',
	];
} else {
	return [
		'post__in' => [ 0 ],
	];
}

Replace box_name and field_name values of page-meta and page-gallery, respectively, as appropriate.

We created an array of the image IDs and set it as the value of post__in query parameter.

Set the source of the Image element to:

{post_id}

You may want to ensure that the entire Section gets output only if there is at least one image in the gallery field by setting a dynamic data condition like this:

Replace ypgtnm with the Bricks ID of the query loop-enabled element.

For getting other image data like the URL, title, caption refer to the Media File Attachment Data in Bricks tutorial.

References

https://docs.acpt.io/developers/functions/get_acpt_field

/wp-content/plugins/advanced-custom-post-type/src/Utils/Wordpress/WPAttachment.php L169.