• Skip to main content
  • Skip to header right navigation
  • Skip to site footer
Callia Web logo

Callia Web

Websites - Design with Purpose

  • Home
  • Websites
    • Quick Launch Websites
    • Go-Pro Websites
    • Redesign & Migration
    • Website Support
    • Website Consultations
    • Accessibility Matters
  • Design Services
    • Logo Design & Branding
    • e-Marketing Resources
    • Graphics & Images
  • Our Work
    • Quick Launch Package
    • Go-pro Package
    • Design services
    • Testimonials
  • Blog
  • About
  • Let’s Talk

Display Advanced Custom Fields Gallery as an Envira Gallery

6 Oct 2014 | WordPress

galleryI’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 🙂

Share this post:

Share on X (Twitter)Share on FacebookShare on LinkedInShare on E-mailShare on WhatsApp

About Jo Waltham

Jo Waltham is the founder of Callia Web and is passionate about helping small business owners and bloggers with their websites and online marketing. Connect with Jo and the rest of the Callia Web team on Twitter or Facebook. Alternatively send us a message.

Liked this post? Subscribe to get our next post direct to your inbox.

  • Please enter your email address if you would like us to contact you by email with information about our services which we feel may be of interest to you. We will process your data in accordance with our privacy notice. You may withdraw this consent at any time by clicking the unsubscribe link in any message we send, or by emailing hello@calliaweb.co.uk.
Previous Post:Cake ArchiveSetting the search results page to use the Foodie Pro grid
Next Post:Runner up in Best Cookery School Website competitionSourdough Bread Making Courses

Reader Interactions

Comments

  1. Josh

    16 Feb 2016

    Thanks!

    I suggest replacing:

    $image_ids = $gallery[0]; // It’s an array within an array
    …

    with:

    foreach ( $gallery as $images ) {
    $image_ids = $images; // It’s an array within an array
    …

    }

    With a foreach loop, currently this only displays the first image in the gallery.

    Reply
    • Jo Waltham

      17 Feb 2016

      Hi Duncan

      It’s been a while since I wrote this code so I’ll need to test out your suggestion and then I’ll get back to you.

      Thanks
      Jo

      Reply
  2. Josh

    26 Mar 2016

    I actually had to do a bit more editing of your code to get it to work, it seems Envira changed their code a bit. Also accessing the ACF data directly from the array. As well as added a small bit to target a specific Envira gallery instead of all of them.

    Feel free to copy and paste/edit for the tutorial as you please — anyone else feel free as well.

    https://gist.github.com/svaults/646ae206cb82dcc3d05a

    Reply
    • Jo Waltham

      26 Mar 2016

      Thanks Josh. This tutorial is nearly 2 years old now, so it is quite likely that the Envira Gallery plugin has changed.

      Thanks for the link to the gist. I’ll check it out.

      Reply
      • Jo Waltham

        19 May 2016

        Hey Josh

        Adding a conditional to check we’re only editing the correct gallery was a great catch. Thanks.

        In your code you’re using the ACF function get_field. In mine I use the WordPress function get_post_meta.

        Reply
  3. Peter

    19 Dec 2020

    I’ve found another way to do this is to use the Dynamic Addon available with Envira Gallery. You can set this to automatically display the default WordPress gallery as an Envira gallery if a shortcode or the classic editor is used (does not work with the block editor). You can then use an ACF gallery field and output the data as a WordPress gallery shortcode in your template and it is displayed as an Envira gallery.

    Please note that this will mean that ALL default WordPress galleries will be displayed as Envira galleries with the same settings defined in the Envira Dynamic Gallery settings. This solution might be less susceptable to changes to the Envira code.

    Reply
    • Jo Waltham

      28 Dec 2020

      Nice. This post was written 6 years ago and the Envira gallery plugin has many new features now.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Leeann Stevenson and Jo Waltham sitting at a desk

Ready to take your project to the next step?

Give us a call, we’re here to discuss what your project needs.

Let’s get started

Contact us

Telephone: 01672 666001 / 666002

Email: hello@calliaweb.co.uk

  • Facebook
  • Twitter
  • Instagram

Quick links

Websites

Design Services

Our work

Testimonials

Blog

Popular posts

Using headings in WordPress

Accessibility basics

Image sizes and aspect ratios

Making images equal size

Beginner’s guide to Analytics

Legal

Privacy policy / Cookie policy

Terms of service

Company number: 08316519

VAT number: GB204336250

Registered address: Bowman House, Royal Wootton Bassett, Wiltshire, SN4 7DB

Copyright © 2023 · Callia Web Ltd · All Rights Reserved