Display a custom field image on Visual Composer Custom Grid Template

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.

Read More

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

Related posts

Leave a Reply

3 comments

  1. I got this issue too.

    Open the file js_composerincludeclassesvendorspluginsacfclass-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

  2. Open the file js_composerincludeclassesvendorspluginsacfclass-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>';
         }
    
  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