WPBakery post grid does not display ACF field properly

• left-handed

• May 28, 2020 at 2:31 pm

Icon: ACF field, image type, return URL
Lesson: Custom Post Type, every lesson has an icon
Post grid (WPBakery Page Builder): lesson’s icon, title & excerpt

There is a page showing lessons using the post grid. The problem is the icon is not displayed, just the URL:

<div field_5ebc384e5d405="" class="vc_gitem-acf field_5ebc384e5d405">
https://et.loc/wp-content/uploads/2020/04/icon_ten.png
</div>

I added acf/prepare_field filter and acf/render_field action in functions.php but it seems they are not executed. Not sure if the post grid doesn’t fire the needed event

WP 5.3.3, ACF: 5.8.11, WPBakery Page Builder

• left-handed

• June 2, 2020 at 5:02 am

Answer from WPBakery Support:
“I am afraid, the standard grid element only supports text field output and does not support ACF image field. However, we do have many third party add-ons: https://wpbakery.com/addons/ which might have such a functionality as many of them have their own grids. Do make sure that you re-confirm the same with the respective add-on author, before making any purchase.”

• John Huebner

• February 18, 2021 at 7:10 am

This is a little old, but someone I know asked the same question. It can be accomplished with a little work.

Bakery wants a text field, but ACF stores an Attachemnt ID. So what you need to do is to convert the image field into a text field that contains the entire image tag.

Let’s say for example that the field created is named “post_grid_featued_image”.

Create am acf/save_post action

add_action('acf/save_post', 'image_to_image_tag');
function image_to_image_tag($post_id) {
  // get unformatted image field value, ensures that image ID is returned
  $image_id = intval(get_field('post_grid_featured_image', $post_id, false));
  // a variable to build the image tag
  $image_tag = '';
  // a different custom field name to store our tag
  $meta_key = 'post_grid_featued_image_converted';
  if ($image_id) {
    // if image id is not empty create the image tag
    // first get the image see function at WP for more information
    // change image size to desired image size
    $size = 'medium';
    $image = wp_get_attachment_image_src($image_id, $size);
    if (!empty($image)) {
      // only do this if the image exists
      // get image alt text if it exists
      $image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
      $image_tag = '<img src="'.$image[0].'" width="'.$image[1].
                   '" height="'.$image[2].'" alt=" '.$image_alt.
                   ' " title="'.$image_alt. '" class="size-'.$size.
                   ' wp-image-'.$image_id.'" />';
      // bonus - make image responsive, this is why the class was added above
      if (function_exists('wp_filter_content_tags')) {
        $image_tag = wp_filter_content_tags($image_tag);
      } else {
        $image_tag = wp_make_content_images_responsive($image_tag);
      }
    }
  }
  // at this point $image_tag will contain the image tag
  // or it will be empty because there is no image
  // save the value in a new meta_key
  $meta_key = 'post_grid_featured_image_converted';
  update_post_meta($post_id, $meta_key, $image_tag); 
}

Now instead of using the acf field you use the custom field that was created for the grid image that contains the image tag “post_grid_featured_image_converted”

• mgo

• November 22, 2021 at 2:34 pm

Hello John! Thanks for the code. I tried, but its not working for me yet. Did you get any feedback form someone who asked you? Since there is a minor typo (post_grid_featued_image) i was wondering if it ever worked.

I setup an additional field post_grid_featured_image_converted to store the converted image URL in ACF

• mgo

• November 22, 2021 at 5:33 pm

Sorry for the confusion, its working well! i forgot to update the image field.

• Willemsbrug

• January 4, 2022 at 6:55 am

Hi!