Display Advanced Custom Fields Gallery as an Envira Gallery

I’m working on a site for a client where there are products with lots additional data. We are using Advanced Custom Fields Pro to enter and display this additional information. There are also extra images which need to be displayed in a gallery format. The ACF plugin has a gallery field type and using that I can create the WordPress built in gallery but we want the extra features that come with the Envira Gallery plugin.

I have previously use the Soliloquy Dynamic Add On to create a slider from an ACF gallery field for my client Tegral Lighting (Sridhar has written a great tutorial on this). Therefore I anticipated that I would find a similar add on for Envira Gallery, as both plugins are written by the same developer, Thomas Griffin. But apparently it is not available yet 🙁

The Envira Gallery is easy to set up but I really wanted my client to have to only deal with one set of extra meta boxes and on the frontend I want to place the gallery after the other custom fields.

In the Envira Gallery code I came across the envira_gallery_pre_data filter which allows you to add, remove or replace the data used to develop the html for the slider. I do love it when a plugin developer adds those filters in 🙂

So this is how I have created Envira Galleries using the data from an ACF gallery field.

First, set up your ACF field group with a gallery field. I’ve called mine “gallery”.

Second, create an Envira Gallery in the WordPress dashboard. Set up the configuration to what you want. Add one image just so the gallery will publish and exist. It doesn’t matter what image, we will be replacing it. Take note of the ID of this gallery.

Third, in your single-product.php template echo the [envira-gallery] shortcode using this ID. As I\’m using a Genesis child theme I\’m doing that by hooking onto the genesis_entry_content. I have also checked that Envira Gallery is installed and if not create the gallery with the inbuilt WordPress gallery instead.

Finally using the envira_gallery_pre_data filter change the image data used to create the gallery HTML to include the images from the ACF gallery field.

Note I am not using the ACF get_field function because I took Bill Erickson’s advice about reducing frontend dependency.

I’ve put all this code in my single-product.php.

As usual, please ensure you have a backup of your files and website, before making any changes to your template files.

You can also view this code on github.

add_action( 'genesis_entry_content', 'jmw_add_envira_gallery_after_content', 15 );
/*
 * Add the gallery after the end of the content
 */
function jmw_add_envira_gallery_after_content() {

	$gallery = get_post_meta( get_the_ID(), 'gallery' ); // 'gallery' is name of my ACF gallery field
	
	// If we have something output the gallery
	if( is_array( $gallery[0] )) {
		if( shortcode_exists( 'envira-gallery' )) {
			echo do_shortcode( '[envira-gallery id="107"]' );	
		}
		else { // Fall back to WordPress inbuilt gallery
			$image_ids = $gallery[0];
			$shortcode = '[gallery ids="' . implode( ',', $image_ids ) . '"]';
			echo do_shortcode( $shortcode );
		}
	}
	
}

add_filter( 'envira_gallery_pre_data', 'jmw_filter_envira_gallery_data', 10, 2);
/*
 * Filter the gallery $data and replace with the image data for our images in the ACF gallery field
 */
function jmw_filter_envira_gallery_data( $data, $gallery_id ) {
	
	$newdata = array();
	
	// Don't lose the original gallery id and configuration
	$newdata[ "id" ] = $data[ "id" ];
	$newdata[ "config" ] = $data[ "config" ];
	
	// Get list of images from our ACF gallery field
	$gallery = get_post_meta( get_the_ID(), 'gallery' );	
	$image_ids = $gallery[0]; // It's an array within an array

	// If we have some images loop around and populate a new data array
	if( is_array( $image_ids ) ) {
	
		foreach( $image_ids as $image_id ) {

			$newdata[ "gallery" ][ $image_id ][ "status" ] = 'active';	
			$newdata[ "gallery" ][ $image_id ][ "src" ] = esc_url( wp_get_attachment_url( $image_id ) );
			$newdata[ "gallery" ][ $image_id ][ "title" ] = esc_html( get_the_title( $image_id ) );
			$newdata[ "gallery" ][ $image_id ][ "link" ] = esc_url( wp_get_attachment_url( $image_id ) );
			$newdata[ "gallery" ][ $image_id ][ "alt" ] = trim(strip_tags( get_post_meta($image_id, '_wp_attachment_image_alt', true) ));
			$newdata[ "gallery" ][ $image_id ][ "thumb" ] = esc_url( wp_get_attachment_thumb_url( $image_id ) );
	
		}
	}
	
	return $newdata;
}
@stygmate

Finally, if you have some suggestions on how this code could be better please let me know 🙂