nth image from ACF Gallery in Bricks

A user asks:

Good day, do you have in Brickslabs any code available how I could get the second image of an ACF gallery within a Bricks dynamic shortcode?

This Pro tutorial shows how we can set up a custom function that can be called as a Bricks dynamic data tag whilst passing in the name of a Gallery-type of ACF Pro custom field and the number so that the specified nth image can be used as the source or background of an Image element.

After implementing the tutorial, to pull the second image of a page_gallery custom field for example:

{echo:bl_get_nth_image_from_gallery(page_gallery, 2)}

Step 1

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

// Function to get get the ID of the image at the specified position from the given ACF Gallery field.
function bl_get_nth_image_from_gallery( string $field, int $n ): ?int {
	// if ACF is not active, return null
	if ( ! class_exists( 'ACF' ) ) {
		return null;
	}

	// store the gallery field value (an array) in a variable
	$gallery = get_field( $field );

	// if the gallery is empty, return null
	if ( empty( $gallery ) ) {
		return null;
	}

	// if the gallery has less than $n images, return the first image ID
	return array_key_exists( $n - 1, $gallery ) ? $gallery[$n - 1]['ID'] : $gallery[0]['ID'];
}

Replace page_gallery with the name of your gallery custom field.

Step 2

Use the function with Bricks dynamic data like this:

{echo:bl_get_nth_image_from_gallery(page_gallery, 2)}