[Resolved] Flexslider for custom post type with multiple images built with Visual Composer

[Author]

Posts

[Nashaat]

Hi,
1- I built a content template for my custom post type (0KMs) using Visual composer.
2- in Field Group for 0KMs i have added a field of repeating IMAGE.
3- I have installed the Flexslider Module.
4- I would like to add the Flexslider to my content Template (which i am designing using Visual Composer), so it looks like your example: hidden link
or like attachment .

Is that possible? if no please give me an alternative solution step by step.
Thank you

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - we offer detailed tutorial to build image gallery using repleting field.

Could you please follow the following guide and try to resolve your issue:
=> https://toolset.com/2017/10/adding-a-gallery-of-images-for-custom-posts/

[Nashaat]

Hi,

My Problem still not solved! I think guys you have a great Plugin but you have not enough Tutorials. Most people who buy your plugin are web designer and not developer. I think its time to make Professional Video Tutorials for each option your plugin has and show results and ask the community what is missing. This Plugin is a powerful tool but needs step by step explanation.!

by the way why not making this gallery work easier? we need to write and insert php shortcodes etc.... which is not a great.

I followed your guide and i could see the images no thumbnails.

i tried these...

This show images on frontend but no gallery

[types field='car-picture' alt='%%ALT%%' title='%%TITLE%%' size='200' align='none' resize='proportional' separator=', '][/types]

-----

this show same results

[wpv-for-each field="wpcf-car-picture"]

[types field='car-picture' width='300' height='200' align='none' resize='crop' separator=', '][/types]

[/wpv-for-each]

-----

I tried to be creative and change the source link in the image of Visual Composer but this doesnt wirk too.

[vc_single_image source="external_link" custom_src="[wpv-for-each field="wpcf-car-picture"][types field='car-picture' width='300' height='200' align='none' resize='crop' separator=', '][/types][/wpv-for-each]"][/vc_column][/vc_row]

OR

[vc_single_image source="external_link" custom_src="[types field='car-picture' alt='%%ALT%%' title='%%TITLE%%' size='200' align='none' resize='proportional' separator=', '][/types]"]

-----
on the other hand Avada's single image shortcode for example has rendered the image perfectly on the front end with this shortcode:

[fusion_imageframe image_id="485" style_type="none" stylecolor="" hover_type="none" bordersize="" bordercolor="" borderradius="" align="none" lightbox="yes" gallery_id="" lightbox_image="" alt="" link="" linktarget="_self" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset=""][types field='car-picture' alt='%%ALT%%' title='%%TITLE%%' size='200' align='none' resize='proportional' separator=', '][/types][/fusion_imageframe]

.....

Why the shortcodes of Visual composer doesn't render the custom fields right

Just the Text Block of visual composer works with custom fields of toolset. Other elements of VC like Single Image, button, carousel dont render the custom field on the front end. Is toolset compatible with VC but only if using VC Text block nothing else ?

[Minesh]

This show images on frontend but no gallery

[types field='car-picture' alt='%%ALT%%' title='%%TITLE%%' size='200' align='none' resize='proportional' separator=', '][/types]

===> Yes - its expected. The shortcode should output image but no gallery. You can check for all available attributes for image field with the following Doc:
=> https://toolset.com/documentation/customizing-sites-using-php/functions/#image

well - I see you are using wrong way to display images with VC shortcode. The correct way to display multiple image using VC single image shortcode is as given under:

[wpv-for-each field="wpcf-car-picture"]
[vc_single_image source="external_link" custom_src="[types field='car-picture' size='thumbnail' url='true' resize='proportional'  width='300' height='200' align='none'][/types]"]
[/wpv-for-each]

Regarding the example you shared for flexslider - that example does not use repeating image field but a single image field. You can download module manager plugin for flex slider to know more about how it works:
=> https://toolset.com/documentation/user-guides/using-toolset-module-manager/
=> https://toolset.com/home/module-manager/