Code for ACF Image via Bricks image element with lightbox

How To
,
1

Hi

for a Bricks custom element I wrote the code that loads an ACF image and shows it in the front-end via the Bricks image element. This is done so that the ACF image has the lightbox functionality from the Bricks image element.

The ACF image field has to be set to return an image array.

In case somebody is interested, here is my code:

$bild = get_field('bild');   //load the ACF image from the ACF field 'bild'
if( !empty( $bild ) ) {
			
//define the parameters needed for the Bricks image element settings
$bild_url = $bild['url'];
$bild_id = $bild['id'];
$bild_filename = $bild['filename'];

// Now the Bricks image element settings are set
$image_settings = array(
	'link' => 'lightbox',
	'image' => array (
	'id' => $bild_id,
	'filename' => $bild_filename,
	'size' => 'medium',
	'full' => $bild_url,
	'url' => $bild_url	
	),
	);
			
// Initialize the Bricks Image class with our settings
$new_image = new \Bricks\Element_Image( ['settings' => $image_settings] );

// Setup frontend actions and filters for the element if any
$new_image->load();

ob_start();

// Enqueue the necessary scripts & styles, populate and output the HTML
$new_image->init();

echo ob_get_clean();
			
};

Cheers

Patric

2 Likes