There are no configuration options for controlling the display of caption text in neither the 1.x or 2.x branches of Flexslider. As it's needed for a project we're currently working on, I've created a simple patch to add this feature. It's a quick and dirty but hopefully this should get the ball rolling.

Other potential features to add:
- Allow the use of text from a field on the node or from a field collection to be used instead of 'title' and 'alt' text from the image.
- Additional options for defining the containers and selectors around the caption text.
- Add option for 'Custom' text which would provide a consistent caption on images in the slideshow.

Files: 
CommentFileSizeAuthor
#1 flexslider-caption-display-options-1861524-1.patch3.05 KBdags
Test request sent.
[ View ]

Comments

Status:Active» Needs review
StatusFileSize
new3.05 KB
Test request sent.
[ View ]

Here's the patch.

After patch got this error:

Notice: Undefined index: caption in theme_flexslider_list() (line 41 of F:\xampp\htdocs\ovaz.com\sites\all\modules\flexslider\theme\flexslider.theme.inc).

Subscribe.

The caption display is an important feature. Otherwise we have to include text to the slideshow images, which is not nice in many cases.

I hope @dags will add this feature to the next release of this slideshow. That will be awesome.

Thanks

Status:Needs review» Needs work

A few issues:

1) The spans in the theme shouldn't have id's assigned to them since multiple sliders on the same page would add two elements with the same id which is invalid.
2) The options described assume you're using an image in the slider. v2 of the library can use any element in a slide

You should be able to do captions with Views and Views Slideshow by setting the right class on a text field in your slideshow.

Instead of setting strict options like "alt" or "title" and such perhaps adding an option to set the class to use as the caption field.
I believe by default that value is "flex-caption". That way it could be used with any element so long as it matches the class name.

I've gotten lots of requests for a simpler way to handle captions with FlexSlider. If you clean up the patch a bit it would help.

Assigned:Unassigned» dags

I'll try to work on the patch a bit this afternoon and hopefully get something posted in the next day or two.

You should be able to do captions with Views and Views Slideshow by setting the right class on a text field in your slideshow.

Were you saying that you could currently do this? If so, can you please go into more detail?

Great module by the way, love the integration with the picture module for great responsiveness!

Just tried patch in #1.

I can see the caption in the Flexslider option set, but no captions show up in the slider.

Also receiving this error on the node's edit page:
Notice: Undefined index: caption in theme_flexslider_list_item() (line 86 of .../sites/all/modules/flexslider/theme/flexslider.theme.inc).

@mengi Look at the examples module in 2.x and you'll see Views setup with flexslider and captions.

And thanks for the feedback, always nice to receive thanks ;-)

subscribing

@mengi Look at the examples module in 2.x and you'll see Views setup with flexslider and captions.

I am having trouble finding the example you are referring too. There isn't a text field for the content type created and I tried using the 'Title' and 'Alt' for the image fields, but there weren't any captions shown.

Could you point out which example view is supposed to have captions (there are 7 different views in the example)? Is additional setup required or is one of the views have caption 'out-of-the-box'?

Title:Add options for displaying caption textAdd options for displaying title text on images as caption in FlexSlider Fields

Status:Needs work» Closed (fixed)

You can now specify to use the Title attribute of an image as the caption text in FlexSlider Fields.

Status:Closed (fixed)» Active

Could you please tell us where exactly?

My content-types have title fields which are populated with the node:title but I can't find the captions nore any configuration options.
I installed the FlexSlider examples module but couldn't find any example which uses the img title as a caption.

Great module btw, love it!

Thank you!

Thank you for a great module!

I tried a dry run of this patch on 7.x-2.0-alpha1. Perhaps this is the wrong version to patch, since it seems theme/flexslider.theme.inc is not updated correctly:

... sites/all/modules/flexslider$ patch --dry-run -p1 <flexslider-caption-display-options-1861524-1.patch
patching file flexslider.admin.inc
Hunk #1 succeeded at 179 (offset 4 lines).
patching file flexslider.module
Hunk #1 succeeded at 389 (offset -10 lines).
patching file theme/flexslider.theme.inc
Hunk #1 succeeded at 40 with fuzz 2 (offset 5 lines).
Hunk #2 FAILED at 88.
1 out of 2 hunks FAILED -- saving rejects to file theme/flexslider.theme.inc.rej

In the original theme/flexslider.theme.inc I see this line (76):

  $output .= '<li' . drupal_attributes($attributes) . '>' . $item . $caption . "</li>\n";

Is the patch supposed to target this?
and change it to:

  $output .= '<li' . drupal_attributes($attributes) . '>' . $item . "\n" . $vars['caption'] . '</li>' ."\n";

With Best Regards,
Johan

There's always the old school way of doing it by rewriting the image field to use a token to pull in the title text. So an example that works that I'm about to style is this:

[field_slideshow_images][field_slideshow_images-title]

.views-field-field-slideshow-images .caption {
float: right;
carry: on;
}

Token support for the caption isn't a bad idea actually.

Issue summary:View changes

Regarding the token approach, here's how you can do it today with Flexslider using existing modules:

1) Install the Views PHP module: https://drupal.org/project/views_php

2) Add three fields in your view, and make sure they are in this order:

-- Content: Image Slideshow (or whatever the name of your field is with multiple images)
-- Global: PHP
-- Global: Custom text

3) Configure the Image Slideshow field as you normally would, but make sure to select the "Exclude from display" checkbox. This hides the normal display of the image field, but still calculates information for it behind the scenes.

4) For Global: PHP, you want to select "Exclude from display" for this field too. Scroll down to the "Output code" field, and enter the following code:

<?php
print $data->field_data_field_<field_name>_field_<field_name>_title;
?>

Where the "<field_name>" values should be replaced with the name of your image field, all in lowercase, and underscores separating words. So in this example, I would replace "<field_name>" with "image_slideshow".

If you're having problems finding the exact field name that needs to be added, use the print_r function to print the entire array and find it:

<?php
print '<pre>'; print_r($data); print '</pre>';
?>

5) Once you have the first two fields set, edit the Global: Custom text field. Open the "Replacement Patterns" legend so you can see the available options. For my example, I enter the following into the Text field:

[field_image_slideshow][php]

This tells the view to display the Image Slideshow field first, and then display my PHP code second -- which is what I use to display the image title field in Step #4.

Once the view is saved, your slideshow should have the title field below the image. Hope this helps.