Home Forums Front-end Issues WPBakery post grid does not display ACF field properly


WPBakery post grid does not display ACF field properly

  • 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">

    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

  • 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: 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.”

  • 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”

  • 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

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

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘WPBakery post grid does not display ACF field properly’ is closed to new replies.