Add caption support to Views style plugin

Caption support is available in Views Slideshow integration but you're right, it's not evident in the Views only module.

Technically you should be able to accomplish the caption support by adding the "Title" field or "alt" text to the image. You can also add any field to your view with the 'flex-caption' class and it should pick it up and display as the caption for the image.

I'll see about adding the same functionality from Views Slideshow though to make it more evident.

I'll get spotzero to have a look at this. He wrote the caption support for Views Slideshow.

Any news on this? Would be a great feature

Cheers

Nothing yet. But it's on the list.

I needed this as well, so I added 2 options ('settings'): one for title, one for text

The functionality works as expected (thanks!), but after setting the title option to an existing field and then back to "none", it's throwing the following error:
Notice: Undefined index: none in theme_views_view_flexslider() (line 32 of sites/all/modules/flexslider/flexslider_views/theme/flexslider_views.theme.inc).

It looks like it was just a matter of adding another condition when checking for a set option in flexslider_views/theme/flexslider_views.theme.inc. I've modified the patch, which is working for me.

I think you can better change all array('none' => t('None')) to array('' => t('None')) because i don't know what will happen if you have a field called none.

Nope, that just throws the very similar:
Notice: Undefined index: in theme_views_view_flexslider() (line 32 of sites/all/modules/flexslider/flexslider_views/theme/flexslider_views.theme.inc).

The patch I posted in #9 gets rid of the errors. If you diff the two patches, you'll see what little I did to work around the problem.

New patch attached, it needed an extra check for empty

i applied it to tha latest dev. works great as far as i can see no errors. i agree that the language part could use a better solution but its working so far.

now just some thoughs of mine. views is able to filter out the language, i use that with my site http://www.root.artwaves.de/screensnapr/1335442635-rS7dC8.jpg

New patch that uses the rendered entity as seen by views, assuming views will select the right language so we don't have to worry about it.

we are duplication array keys, is this by intention?
flexslider_optionset

+++ b/flexslider_views/flexslider_views_plugin_style_flexslider.inc
@@ -17,6 +17,8 @@ class flexslider_views_plugin_style_flexslider extends views_plugin_style {
 
     $options += array(
       'flexslider_optionset' => array('default' => 'default'),
+      'caption_field' => array('' => t('None')),
+     'flexslider_optionset' => array('' => t('None')),
     );

nice catch, fixed

hm there seems to be something wrong with the part of the patch that patched theme.inc

Notice: Undefined index: uri in template_preprocess_flexslider_container() (line 40 of /mnt/www/WORKSPACE_DRUPAL/EIGENE_PROJEKTE/test_v2/sites/all/modules/contrib/flexslider/theme/flexslider.theme.inc).

I deleted those lines, they were setting a variable $normal_url which was never used.

hmm i think there is now something wrong with the image style being used, i overwrote the Standard image style to 800x100 and hit save but he is not using the style, this was working before.
he uses the original size i think.

Set the image style inside your view, directly on the field

ok i did that too. there is a strange behavior now, one image gets 800x100 and the second one is still using its original size 2000x500 but appears scaled down. (analyzed with firebug)

is the img src using the correct url? Sounds like caching problem?

my bad, i tried flushing image styles only. problem was again firefox cache, since the new versions i began hating it, i can not even change a logo without clearing browser cache.
so far seems ok, i will report back if i find errors/problems. thanks for the great patches and conversion :)

so now some others should test it so that we can mark it RTBC.

Awesome!
Patch works like a charm.

Here is a quick screenshot to demonstrate.

and with some custom css it looks like this: http://www.root.artwaves.de/screensnapr/1335470540-Rn747p.jpg

So now we only need a brave person to RTBC this ;p

Patch #18 works great. I've got it running on two different sites now.

I'll review it and commit it if all goes well.

Thanks!

Getting the following notice:

Notice: Undefined index: alt in include() (line 21 of /Library/WebServer/Documents/drupal7/sites/all/modules/flexslider/theme/flexslider-container.tpl.php)."

when we only have a title and nothing in the text field.

Looks like the logic isn't quite correct - here's what we did to fix it:

       <?php if(!empty($item['#item']['title']) || !empty($item['#item']['alt'])) : ?>
         <div class="flex-caption"><strong><?php print $item['#item']['title']; ?></strong>&nbsp;<?php print $item['#item']['alt'];?></div>
        <?php endif; ?>

New patch that fixes the tpl.php

Patch works successfully. There is a random "strong>" that show up after the title. It's on line 26 in flexslider-container.tpl.php. I removed it and everything's good

new patch

flexslider-container.tpl.php

<?php if(isset($item['#item']['title']) || isset($item['#item']['alt'])) : ?>
          <div class="flex-caption">
            <?php if(!empty($item['#item']['title'])) : ?>
              <strong><?php print $item['#item']['title']; ?></strong>&nbsp;
            <?php endif; ?>
            <?php if(!empty($item['#item']['alt'])) : ?>
              <?php print $item['#item']['alt']; ?>
            <?php endif; ?>

why is there a nbsp;

it seems, if you first apply i1512636-30.patch and then i1512636-32.patch the "strong>" is not removed (just for info for people that are not so advanced with patching and want to apply them)

running good here with no notice errors

using:
7.x-1.0-rc3 tar.gz (25.46 KB) | zip (37.67 KB) 2012-May-17 Notes
7.x-3.x-dev tar.gz (1.54 MB) | zip (1.76 MB) 2012-Jun-01 Notes

The nbsp; was there in the original tpl.php as well, so I left it.

I'll make a new patch with all changes

i vote for removing the original nbsp; because if someone wants space/margins he can/should use css.

nbsp is gone

i think if one of the maintainers takes a look at it we could set it RTBC and it could be committed. i am running it on my live site already.

@e-anima if so can you mark it as RTBC

:)
tested on my texturesite www.texturecase.com/en

The patch in #36 worked great for me! Thanks to everyone who worked on it.

Good work guys. Any chance that it can be improved further by exposing in the UI the option to display the:-
- Title only
- Alt only
- Title & Alt
- Nothing
?

@johnflower, let's handle that in another issue, I would like to see this committed first.

I'm a little busy with Mobile Tools at the moment to really review the implementation thoroughly so I'll trust all you talented individuals who helped create the patch. I'll push this patch into the dev branch to test it out but won't put it into a full release (I have some other fixes waiting for v1.0 I want to include).

As for #41, new features from here on out I'm going to reserve for v2 of the module which will use the new v2 version of Flex Slider. There are lots of feature requests that I've collected which would really only work on v2 and so I'll be focusing features there.

I am reopening because I think I found a bug with the conditions in flexslider-container.tpl.php.

Line 20 checks if the title or alt are set using isset().

They are actually always set since they are part of the $items array, even if they are empty. This is causing the caption div to be ouput even when the title or alt fields are empty. I have a view with an image field that doesn't have a title or alt field, and the caption div appears because of isset check.

Here is a patch against 7.x-1.x which changes these isset checks to !empty. Thanks.

The patch in #36 also adds a ton of duplicate markup:

7.x-1.x-dev:

<div class="flex-nav-container">
  <div class="flexslider-content flexslider clearfix flexslider-processed" id="flexslider-4">
    <ul class="slides">
      <li style="width: 100%; float: left; margin-right: -100%; display: list-item;">
        <div class="flex-nav-container">
          <div class="flexslider-content flexslider clearfix flexslider-processed" id="flexslider-1">
            <ul class="slides">
              <li style="display: list-item;">
                <img class="adaptive" typeof="foaf:Image" src="/sites/default/files/adaptive/public/ivy.jpg" alt="" />
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li style="width: 100%; float: left; margin-right: -100%; display: none;">
        <div class="flex-nav-container">
          <div class="flexslider-content flexslider clearfix flexslider-processed" id="flexslider-2">
            <ul class="slides">
              <li style="display: list-item;">
                <img class="adaptive" typeof="foaf:Image" src="/sites/default/files/adaptive/public/students.jpg" alt="" />
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li style="width: 100%; float: left; margin-right: -100%; display: none;">
        <div class="flex-nav-container">
          <div class="flexslider-content flexslider clearfix flexslider-processed" id="flexslider-3">
            <ul class="slides">
              <li style="display: list-item;">
                <img class="adaptive" typeof="foaf:Image" src="/sites/default/files/adaptive/public/door.jpg" alt="" />
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

7.x-1.0-rc3:

<div class="flex-nav-container">
  <div class="flexslider-content flexslider clearfix flexslider-processed" id="flexslider-4">
    <ul class="slides">
      <li style="width: 100%; float: left; margin-right: -100%; display: none;">
        <img class="adaptive" typeof="foaf:Image" src="/sites/default/files/adaptive/public/ivy_20.jpg" alt="" />
      </li>
      <li style="width: 100%; float: left; margin-right: -100%; display: none;">
        <img class="adaptive" typeof="foaf:Image" src="/sites/default/files/adaptive/public/students_20.jpg" alt="" />
      </li>
      <li style="width: 100%; float: left; margin-right: -100%; display: list-item;">
        <img class="adaptive" typeof="foaf:Image" src="/sites/default/files/adaptive/public/door_20.jpg" alt="" />
      </li>
    </ul>
  </div>
</div>

Bumping this to hopefully get some traction.

I won't be incorporating new features into the first version of the module. Caption support for 2.x works pretty well as long as you have the right classes attached to your fields as it stands. As far as I remember, we don't need a custom field anymore for the caption. You can just set any field as the caption in Views using the right class on the field.

You'll have to check the FlexSlider library docs on what the default class name is for a caption.

Please try 2.x and let me know if there are any issues getting captions working. Just open a new issue against the 2.x branch if you have any issues.

Thanks.