[Resolved] Flexslider captions for single image field.

[Author]

Posts

[Akhil]

Hi, Luo.

I have few images custom field. named
property-photo , property-image1,...property-image6.

I manage to get the slider running here:
hidden link
[the slider script is at the js script tab.]

you can see here:
hidden link

The title is working fine but it's not displaying as a caption.

Pls, look into this pls.
I wanted to have final result like this: hidden link

i believe you have my login details from the prev topics. thanks.

[Luo Yang]

Dear C6410,

Please check the document of flexslider:
hidden link
click tab "HTML", you will see their HTML codes, for example:

...
    <li>
      <img src="slide1.jpg" />
      <p class="flex-caption">Adventurer Cheesecake Brownie</p>
    </li>
...

It needs to output the caption text outside the HTML img tag

But there Types image shortcode:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image
It can not output the image title or caption independently. so there isn't such a feature within Types plugin or Views plugin, I suggest you try to create a custom shortcode for it, for example:
1) use below PHP codes to create a custom shortcode [image_title]
hidden link

add_shortcode('image_title', 'my_images_shortcode');
function my_images_shortcode($atts,$content) {
	global $wpdb;

	$atts = shortcode_atts( array(
			  'field' => '',
	), $atts );
	$image = get_post_meta(get_the_ID(), 'wpcf-' . $atts['field'], true);
	
	$attachment_id = $wpdb->get_var($wpdb->prepare(
		"SELECT ID FROM $wpdb->posts WHERE guid = %s",
		$image
	));
	$image_title = get_the_title($attachment_id);
	return $image_title;
}

2) Put it into the content like this:
hidden link

    <li>
      <img src="[types field="property-photo" size="medium" url="true" resize="proportional"][/types]" /> 
       <p class="flex-caption">[image_title field='property-photo']</p>
    </li>

[Akhil]

Perfect job , thank you.