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

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