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 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.