Display a custom field image on Visual Composer Custom Grid Template

Question

I'm working on a WP site with Visual Composer.

In the homepage I've inserted a "Post Grid" element which load a specific custom post type.

This custom post has multiple custom fields (made with Advanced Custom Fields Plugin): one of these fields is an image.

This Post Grid uses a custom grid to display these custom fields.

When I preview the page, it displays correctly the post thumb (the post featured image), some text custom fields, but the secondary image (created with a custom field) displays only text (in the specific the Array Object or ID of the image).

How can I render the image? Is it possible to insert some code for that custom field (ex. the omg html tag) to avoid the text render?

Thanks in advance, Francesco

Answer 1

I got this issue too.

Open the file js_composer\include\classes\vendors\plugins\acf\class-vc-gitem-acf-shortcode.php

And put this code: before the return, and you can comment the original return:

$allFields = acf_get_fields($field_group);
    for ($i=0; $i < count($allFields); $i++) {
        if ( $field_key == $allFields[$i]['key'] && $allFields[$i]['type'] == 'image') {
            return '<div ' . $field_key . ' class="' . esc_attr( $css_class ) . '">'
                    . '<img src=" {{ acf' . ( ! empty( $field_key ) ? ':' . $field_key : '' ) . ' }} ">'
                 . '</div>';
        } else {
            return '<div ' . $field_key . ' class="' . esc_attr( $css_class ) . '">'
                    . '{{ acf' . ( ! empty( $field_key ) ? ':' . $field_key : '' ) . ' }}'
                 . '</div>';
        }
    }

This work for the image field, you can make more elses to others types of fields.

You can see my file and some info here: https://github.com/ramonMontanhes/visualcomposer-acf

Answer 2

Open the file js_composer\include\classes\vendors\plugins\acf\class-vc-gitem-acf-shortcode.php

And put this code: before the return, and you can comment the original return:

     $f = get_field_object($field_key);


     if ( $f['type'] == 'image') {
         return '<div ' . $field_key . ' class="' . esc_attr( $css_class ) . '">'
                 . '<img src=" {{ acf' . ( ! empty( $field_key ) ? ':' . $field_key : '' ) . ' }} ">'
              . '</div>';
     } else {
         return '<div ' . $field_key . ' class="' . esc_attr( $css_class ) . '">'
                 . '{{ acf' . ( ! empty( $field_key ) ? ':' . $field_key : '' ) . ' }}'
              . '</div>';
     }

Answer 3

Are you sure you are using exact code to fetch Image from Advance custom field option ?

Here is the exact code which you needed:

<?php 

$image = get_field('image');

if( !empty($image) ): ?>

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>

Just replace this id with your own field id and it will become like shown below:

get_field('your own field id');

Hope, it makes sense, if you still need any assistance let me know. Thanks