Post Attachments Galleries in Bricks

This Pro tutorial shows how bricks/element/settings filter can be used to automatically replace the images of an Image Gallery element in Bricks builder with the images that are attached to the current post (can be of any post type).

Any image that is added to/inserted in a Post/Page etc. will automatically be attached to that post and will continue to remain so even if the images are deleted from the WP editor.

For the posts that do not have any image attachments, the images set in the Gallery element will be displayed. We’ll also show how bricks/element/render filter can be used so that the Section having your gallery will not be output if the post being viewed has no attached images.

Step 1

Edit the Template that applies to single pages of your post type with Bricks.

Note: If you’d like to display the attached images in Bricks’ gallery for a single static Page, edit that Page with Bricks and follow this step instead of editing the Page Template.

Add a Section and inside the Section’s Container, add an Image Gallery element.

Add a few images (does not matter what images) so you can see how the gallery is going to look with your desired settings like item spacing.

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

// Feed images attached to the current post to a specific Image Gallery element.
add_filter( 'bricks/element/settings', function( $settings, $element ) {
	// ensure that the correct element is being targeted and that we are on a singular page
	if ( $element->id !== 'dlhfpb' || ! is_singular() ) {
		return $settings;
	}

	// get an array of attachment objects for the current post
	$attachments = get_children(
		array (
			'post_parent' => get_the_ID(),
			'post_status' => 'inherit',
			'post_type' => 'attachment',
			'post_mime_type' => 'image',
			'order' => 'ASC',
		)
	);

	// if there are no attachments, return the default settings array
	if ( empty( $attachments ) ) {
		return $settings;
	}

	// store attachments IDs in an array 
	$attachments_ids = wp_list_pluck( $attachments, 'ID' );

	// declare an empty array to store the new images settings
	$new_images_settings = [];

	// loop through the attachments IDs and populate the new images settings array
	foreach ( $attachments_ids as $attachment_id ) {
		$new_images_settings[] = array(
			'id' => $attachment_id,
			'url' => wp_get_attachment_url( $attachment_id ),
			'full' => wp_get_attachment_image_src( $attachment_id, 'full' )[0],
		);
	}

	// replace the element's images settings array with the above array
	if ( ! empty( $new_images_settings ) ) {
		$settings['items']['images'] = $new_images_settings;
	}

	return $settings;
}, 10, 2 );

Replace dlhfpb with the element ID of your Image Gallery element.

Step 2

If you would like to not output the Section having the gallery when the current post has no images, implement this step.

Add the following in child theme’s functions.php or in your code snippets plugin:

add_filter( 'bricks/element/render', function( $render, $element ) {
	// ensure that the correct element is being targeted and that we are on a singular page
	if ( $element->id !== 'grvlud' || ! is_singular() ) {
		return $render;
	}

	// get an array of attachment objects for the current post
	$attachments = get_children(
		array (
			'post_parent' => get_the_ID(),
			'post_status' => 'inherit',
			'post_type' => 'attachment',
			'post_mime_type' => 'image',
		)
	);

	// if there are no attachments, return false so that the element is not rendered
	return ! empty( $attachments );
}, 10, 2 );

Replace grvlud with the element ID of your Section.

References

https://publishpress.com/knowledge-base/inherit/

https://developer.wordpress.org/reference/functions/get_children/