WPBakery Page Builder ACF EXTRA Grid Item

functions.php

/**************************************  
* VC ACF GRID ITEM W/ RELATIONSHIP 
***************************************/
add_filter( 'vc_grid_item_shortcodes', 'vc_grid_item_shortcode_acf_extra' );
function vc_grid_item_shortcode_acf_extra( $shortcodes ) {
    $groups = function_exists( 'acf_get_field_groups' ) ? acf_get_field_groups() : apply_filters( 'acf/get_field_groups', array() );
    $groups_param_values = $fields_params = array();
    foreach ( $groups as $group ) {
    	$id = isset( $group['id'] ) ? 'id' : ( isset( $group['ID'] ) ? 'ID' : 'id' );
    	$groups_param_values[ $group['title'] ] = $group[ $id ];
    	$fields = function_exists( 'acf_get_fields' ) ? acf_get_fields( $group[ $id ] ) : apply_filters( 'acf/field_group/get_fields', array(), $group[ $id ] );
    	$fields_param_value = array();
	    foreach ( (array) $fields as $field ) {
		    $fields_param_value[ $field['label'] ] = (string) $field['key'];
    	}
	    $fields_params[] = array(
		    'type' => 'dropdown',
		    'heading' => __( 'Field name', 'js_composer' ),
		    'param_name' => 'field_from_' . $group[ $id ],
		    'value' => $fields_param_value,
		    'save_always' => true,
		    'description' => __( 'Select field from group.', 'js_composer' ),
		    'dependency' => array(
			    'element' => 'field_group',
			    'value' => array( (string) $group[ $id ] ),
		    ),
	    );
    }

    $shortcodes['vc_gitem_acf_extra'] = array(
		'name' => __( 'Advanced Custom Field Extra', 'js_composer' ),
		'base' => 'vc_gitem_acf_extra',
		'icon' => 'vc_icon-acf',
		'category' => __( 'Content', 'js_composer' ),
		'description' => __( 'Advanced Custom Field with Relationship', 'js_composer' ),
		'params' => array_merge(
			array(
				array(
					'type' => 'dropdown',
					'heading' => __( 'Field group', 'js_composer' ),
					'param_name' => 'field_group',
					'value' => $groups_param_values,
					'save_always' => true,
					'description' => __( 'Select field group.', 'js_composer' ),
				),
			), $fields_params,
			array(
				array(
					'type' => 'checkbox',
					'heading' => __( 'Show label', 'js_composer' ),
					'param_name' => 'show_label',
					'value' => array( __( 'Yes', 'js_composer' ) => 'yes' ),
					'description' => __( 'Enter label to display before key value.', 'js_composer' ),
				),
				array(
					'type' => 'dropdown',
					'heading' => __( 'Align', 'js_composer' ),
					'param_name' => 'align',
					'value' => array(
						__( 'left', 'js_composer' ) => 'left',
						__( 'right', 'js_composer' ) => 'right',
						__( 'center', 'js_composer' ) => 'center',
						__( 'justify', 'js_composer' ) => 'justify',
					),
					'description' => __( 'Select alignment.', 'js_composer' ),
				),
				array(
					'type' => 'textfield',
					'heading' => __( 'Extra class name', 'js_composer' ),
					'param_name' => 'el_class',
					'description' => __( 'Style particular content element differently - add a class name and refer to it in custom CSS.', 'js_composer' ),
				),
			)
		),
		'post_type' => Vc_Grid_Item_Editor::postType(),
	);
	
	return $shortcodes;
}


add_shortcode( 'vc_gitem_acf_extra', 'vc_gitem_acf_extra_render' );
function vc_gitem_acf_extra_render( $atts, $content = null ) {
        $field_key = $label = '';

		extract( shortcode_atts( array(
			'el_class' => '',
			'field_group' => '',
			'show_label' => '',
			'align' => '',
		), $atts ) );
		if ( 0 === strlen( $field_group ) ) {
			$groups = function_exists( 'acf_get_field_groups' ) ? acf_get_field_groups() : apply_filters( 'acf/get_field_groups', array() );
			if ( is_array( $groups ) && isset( $groups[0] ) ) {
				$key = isset( $groups[0]['id'] ) ? 'id' : ( isset( $groups[0]['ID'] ) ? 'ID' : 'id' );
				$field_group = $groups[0][ $key ];
			}
		}
		if ( ! empty( $field_group ) ) {
			$field_key = ! empty( $atts[ 'field_from_' . $field_group ] ) ? $atts[ 'field_from_' . $field_group ] : 'field_from_group_' . $field_group;
		}
	
		if ( 'yes' === $show_label && $field_key ) {
			$field_key .= '_labeled';
		}
		$css_class = 'vc_gitem-acf'
		             . ( strlen( $el_class ) ? ' ' . $el_class : '' )
		             . ( strlen( $align ) ? ' vc_gitem-align-' . $align : '' )
		             . ( strlen( $field_key ) ? ' ' . $field_key : '' );

		return '<div ' . $field_key . ' class="' . esc_attr( $css_class ) . '">'
		       . '{{ acf_extra' . ( ! empty( $field_key ) ? ':' . $field_key : '' ) . ' }}'
		       . '</div>';
}

add_filter( 'vc_gitem_template_attribute_acf_extra', 'vc_gitem_template_attribute_acf_extra', 10, 2 );
function vc_gitem_template_attribute_acf_extra( $value, $data ) {
	$label = '';
	/**
	 * @var null|Wp_Post $post ;
	 * @var string $data ;
	 */
	extract( array_merge( array(
		'post' => null,
		'data' => '',
	), $data ) );

	if ( strstr( $data, 'field_from_group_' ) ) {
		$group_id = preg_replace( '/(^field_from_group_|_labeled$)/', '', $data );
		$fields = function_exists( 'acf_get_fields' ) ? acf_get_fields( $group_id ) : apply_filters( 'acf/field_group/get_fields', array(), $group_id );
		$field = is_array( $fields ) && isset( $fields[0] ) ? $fields[0] : false;
		if ( is_array( $field ) && isset( $field['key'] ) ) {
		//	$data = $field['key'] . ( strstr( $data, '_labeled' ) ? '_labeled' : '' );
		}
	}
	$label = '';
	if ( preg_match( '/_labeled$/', $data ) ) {
		$data = preg_replace( '/_labeled$/', '', $data );
		$field = get_field_object( $data );
		$label = is_array( $field ) && isset( $field['label'] ) ? '<span class="vc_gitem-acf-label">' . $field['label'] . ':</span> ' : '';
	}

	$value = '';
	if ( $data ) {
	    $field = get_field_object( $data );
	    if( $field['type'] = 'relationship'){
	
	        $posts = get_field( $data, $post->ID);

            if( $posts ){
	            $value .= '<ul class="acf-relationship-list">';
	            foreach( $posts as $p ){
	                $value .= '<li>';
	    	        $value .= '<a href="'. get_permalink( $p->ID ).'">'. get_the_title( $p->ID ).'</a>';
	                $value .= '</li>';
	            }
	            $value .= '</ul>';
            }
            
	    } else {
    		$value = do_shortcode( '[acf field="' . $data . '" post_id="' . $post->ID . '"]' );
	    }

	}

	return $label . apply_filters( 'vc_gitem_template_attribute_acf_extra_value', $value );
}

Duplicate of the ACF Grid Item code for WPBakery Page Builder but adds functionality for Relationship field types to print posts out in a list.