The current image flexslider_fields support for images is awesome!

We'd like to be able to switch from using the Field Slideshow module to instead use Flex Slider as Field Slideshow is lacking responsive-goodness.

Field Slideshow has on their project page: "This module plays well with: ... Field Collection (to provide the images to the slideshow, and use additional fields for captions and/or links)"

This is what it looks like in use when I am looking at the display options for my content type which has a field collection:
 Manage Display Field

And when those options are expanded:
 Expanded Field Options

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

sokrplare’s picture

Taking a look at what settings would be needed in a similar Flex Slider version, and what is already handled inside the Flex Slider config system.

Reviewing field slideshow vs flexslider settings needed

sokrplare’s picture

Status: Needs review » Active

Updating title to match actual code additions. Assigning to myself.

sokrplare’s picture

Title: Support Field Collections as part of Field integration » Add Linking, Caption and Field Collections support to Flexslider Fields
Assigned: Unassigned » sokrplare
Status: Active » Needs review
FileSize
12.51 KB

First pass with linking, caption, and field collection support!

Notes

  1. I've tested a fair bit - especially the linking and caption. When I added Field collection support and it just seemed to work magically I ran with it :)
  2. More importantly, this code is probably pretty solid because it is 95% a copy-paste from the Field Slideshow module (thanks guys!)
  3. I don't have familiarity with media field types so someone might want to jump in and add/test that. The code is pretty much sitting there, but should be enabled and tested (see line 272 of flexslider_fields.module)
  4. I didn't add defaults of alt and title for field collection (or media) field type images. No need in my case and the nested if-statements were getting daunting.
sokrplare’s picture

Status: Active » Needs review
minorOffense’s picture

I'll review tonight and see about pushing it into dev.

I have a new release scheduled for next week (the ever illusive 1.0 release)

minorOffense’s picture

Status: Needs review » Postponed

The patch fails against the latest dev.

Can you re-roll it and post a new one? Just set the status to "Needs review" when you're ready.

Thanks.

sokrplare’s picture

Status: Postponed » Needs review
FileSize
1010 bytes

Thanks for taking a look - poked around and looks like the Views caption and link patch (which looks awsome!) conflicts.

I've merged the changes in theme/flexslider-container.tpl.php so it should work for both. Git has gone crazy (or rather, this Git user) and I'm way too tired to figure it out right now. Posting the merged file itself. Might get to look more into this tomorrow, but not looking likely as the project that needed this has hit phase II and there is a ton of other stuff on my plate.

Can't wait for the 1.0 release!

sokrplare’s picture

Alright, couldn't leave it alone. Here is the patch!

minorOffense’s picture

Version: 7.x-1.x-dev » 7.x-2.x-dev

I'm moving this to the 2.x branch. I'll create the feature there and backport to 1.x since this was created before I decided to feature lock the first version.

floydm’s picture

Thank you much for adding this! I'd been pulling my hair out trying to figure out whether it was better to try to add adaptiveness to field_slideshow or caption and linkiness to Flex Slider. I just applied the patch to the latest 1.x devel build and it appears to be exactly what I need.

BTW if anyone else is having a tough time how to configure things so this works for them, follow these instructions on setting up a slideshow using a field collection but sub in Flex Slider for field_slideshow.

-Floyd

muranod’s picture

I really need this ability to add a caption field / field collections, but just can't make the patch work (using vista). I've patched only one module before and that took days, and now, following my own directions and trying both Netbeans and Tortoise SVN, I cannot get this to work. Can I do this manually?

Jackinloadup’s picture

muranod: check out Applying patches page.

muranod’s picture

Thanks, jackinloadup. I hadn't seen that page - I'll give it a go tomorrow. Appreciate the help - my sites all ready to go except for the photo galleries, which will be one of the main parts of it, so I want to to look simple and elegant, with captions.

Dan

sokrplare’s picture

@muranod - if you don't actually need Field Collection support - which it sounds like you might not - the Image Title and Alt fields will actually display as a caption out-of-the-box so you don't need to add all this overhead.

muranod’s picture

I guess I could just stay with the alt tag, but I thought having a caption feld might give me a few more presentation options and make organizing, formatting and writing detailed captions a bit easier. Would field collection add that much overhead? Galleries will be from 10 to 40 images, depending on the story / subject.

In either case, 'd like to keep the caption text to the width of the image, which normally alternates between horizontal and vertical orientations. I'm guessing that I would have to add another div in the template file for that?

muranod’s picture

UPDATE: For anyone who is having difficulty applying a patch. Nothing was working for me. I was trying to apply the patch a) from the command line, b) from TortoiseSVN right-click context menu (windows), and then c) opening things in TortoiseSVN, d) trying various menu options in Netbeans.

FINALLY, I simply opened the module itself in NETBEANS and from the menu, TOOLS --> APPLY DIFF PATCH, then select the patch file and it was DONE! I hope this helps someone else who is struggling to simply apply a patch to a module.

Dan

minorOffense’s picture

Just a note. The patch is for flexslider v1. V2 will most likely have this built in.

muranod’s picture

Thanks, MinorOffence,

Is there any documentation on how to actually set it up?

minorOffense’s picture

The docs for v2 don't exist (since the feature doesn't exist yet ;-)

For v1, it's whatever's in this issue queue.

muranod’s picture

Thanks for all the advice. I got it all working perfectly and it's just what I need, but -- can't get the images in the field collection to be adaptive. I've tried all the different settings and they only show at one size.

muranod’s picture

Got it all working now.

In the content type:
Images & captions set to Field Collection, using the embedded widget AND set the display of the field to Flexslider.

In Field Collections, manage fields:
set caption to Text
set Image to Image with the Image widget

Here is a blog url with directions that I followed, except that it didn't work when I set the Field collection display to Slideshow, as recommended there:

http://drupalquests.blogspot.com/2012/01/drupal-7-create-slideshow-insid...

One last thing: any suggestions for getting the caption to be the same width of the photo when the photo changes from horizontal to vertical and back to horizontal again? It's not a deal breaker, but would look nice.

Also, thanks for the help and suggestions,

Dan

ownage’s picture

I installed the v1.x dev, patched with the 2nd above patch, saw the new options, followed the tutorial exactly whilst substituting for Flexslider instead of Field Slideshow, and was unable to construct the View accordingly. I had my Flexslider using Views in a block. The tutorial didn't cover anything about Views, but I tried adding every possible field I could try relating to the collection. Each time Views would tell me, "Style Flex Slider requires an image field to be added."

Maybe I effed up somewhere, but after 4 hours of troubleshooting on something so stupid, it's quite hard to not look for alternative options. I reinstalled the recommended release again for several reasons, one of which was due to there being random notices about undefined alt/title tags somewhere in the theme folder.

Installing 3-4 modules just to get links & captions seems a bit overbearing if I have to be honest. I do respect the development of this module, but hope it can be maintained to become flawless for future use.

muranod’s picture

ownage, my views block for this is set to:
FORMAT: Flex Slider, SETTINGS: Grouping field: none, option set: whichever you wish, Caption field: none, Description field: none.
FIELDS: Title
FIELDS: Body
FIELDS: Gallery Images (this is in Field Collections) - Formatter: Flexslider, Option set: whichever you wish, Link image to: Nothing, Caption: Title and Alt text, Link caption to: Nothing.

This plus my other settings above works for me. Hope this helps.

I agree - I am very disappointed that Drupal doesn't have an elegant photo gallery solution that doesn't require putting each gallery image into an individual node. I also don't like requiring a title/alt tag for the caption. This module, with the patch, is closest to what I need.

I am also disappointed that it is such an ordeal to simply add a caption and credit under an image. Hopefully, all of these things will evolve.

ownage’s picture

FileSize
177.47 KB

muranod:

Thank you for the info. Your settings look exactly how mine were set up, so perhaps something else was wrong in the process.
Whatever it was, I cannot troubleshoot it because I have deleted that info.

I hope this helps someone out-- there's a simple work around to creating a link & rendering HTML inside your flex-captions using jQuery. There is no need to install several modules to get this functionality. I'm assuming I could get the image to link as well, but I haven't tried.

Here's my slideshow:

Flex Captions Hacked

Here's the code:

jQuery(document).ready(function(){
function makeLink () {
jQuery(".flex-caption").html(function(i, str) {
return str.replace("Your Potential", "<a href='http://google.com'>Your Potential</a>");
});
}
    makeLink();
});
gfed’s picture

Thanks for the patch! It worked just fine, but I think you're missing a closing div tag in flexslider-container.tpl.php. It broke my layouts until I added it at the end.

naleenyadav’s picture

Component: Code » User interface
Assigned: sokrplare » Unassigned
Category: feature » support
Status: Needs review » Active
Issue tags: +flexslider
FileSize
59.88 KB

Dear All,

I am trying to achieve #24 i.e. having caption(and read more button) beside images rather than at the bottom. But not able to get it.Settings for my views slider are:
FORMAT: Slideshow SLIDESHOW TYPE: Flex Slider, SETTINGS: Option set: default Link image to: Nothing, Caption: Title, Link caption to: Nothing.
FIELDS: Title
FIELDS: Body
FIELDS: Gallery Images (this is in Field Collections)
my slider looks like this
slider
Any pointer, link or tutorial for the same would be of great help.

Thanks,
Naleen

minorOffense’s picture

Status: Active » Needs work

I'm working on an example view to add to the flexslider_example module to show how to use captions correctly in the new version. I'll notify once it's ready.

pvhee’s picture

Any update on this? Would love to see the support of captions out-of-the-box with flexslider.

portulaca’s picture

+1

minorOffense’s picture

Title: Add Linking, Caption and Field Collections support to Flexslider Fields » Add caption support for FlexSlider Fields
Component: User interface » Code

Nothing yet for captions with flexslider_fields at the moment. A little swamped with work. If someone feels like writing a patch I'd be up for reviewing it.

I'm going to focus this issue on only adding caption support to flexslider_fields.

I'll open separate issues for field collections and linking captions.

dianacastillo’s picture

But how do you add Titles and Alts to the image ? I cant find where to do that!

dianacastillo’s picture

Someone has answered this for me here http://drupal.org/node/1067620#comment-6994238

minorOffense’s picture

Status: Needs work » Closed (won't fix)

We're adding basic title field support in the captions for FlexSlider. #1861524: Add options for displaying title text on images as caption in FlexSlider Fields

Field collection support will be a separate project (which I haven't started yet). But if someone wants to create the sandbox they're more than welcome. I'd look into the FlexSlider Entityreference module as an example.

davemybes’s picture

Status: Closed (won't fix) » Needs review
FileSize
3.76 KB

I have created a patch that allows you to use the image title field as the caption. There is a new checkbox in the field Display settings to enable the option. It will link you to the field settings if Title is not enabled for the imagefield.

minorOffense’s picture

Status: Needs review » Closed (fixed)
ressa’s picture

I haven't tried any of the above patches, but here is some CSS I used to insert the title of the node on top of the image as a caption.

First, rewrite the view, you need an image and some text, most likely the title of the node:

<div class="flex-slideshow">
  [field_front_of_building]
  <h1 class="flex-caption">[title]</h1>
</div>

The CSS:

.flex-slideshow {
  position: relative;
}
.flex-caption {
  background: white;
  bottom: 45px;
  font-size: 36px;
  left: 0;
  line-height: 40px;
  opacity: 0.85;
  padding: 10px 20px;
  position: absolute;
}
angoo’s picture

Issue summary: View changes
Status: Closed (fixed) » Needs review
FileSize
2.13 KB

I believe that widgets other than Image Widget have to be taken into consideration.
If Media Browser widget from Media module is in use, title field is defined in file/%/edit
I propose not to check if the Title field is enabled or not, but to simply pull information depending on current widget if it's set.

  • Commit 5e27a66 on 7.x-2.x, youtube, 8.x-2.x, startslide authored by incrn8, committed by minorOffense:
    Fix for issue [#1645100]
    
couloir007’s picture

Any word on v2 and using Field Collection? Thanks!

jenlampton’s picture

Title: Add caption support for FlexSlider Fields » Add caption support for ALT to FlexSlider Fields
Category: Support request » Feature request
FileSize
2.47 KB

I love love love the simple handling for title fields, thank you! I'd like to add one additional option here for ALT since I have a site that used the alt tag for captions with field_slideshow module. Attached is a simple patch that just adds ALT support, the other things mentioned earlier in this issue are not included.

pacome’s picture

Hi jenlampton,

thanks for your patch, based on it i could find a solution to support Image Field caption module as well for html captions.
For those interested, a -dirty- starting point is here.

-p-

minorOffense’s picture

Status: Needs review » Fixed

Added alt as caption source.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

jenlampton’s picture

Status: Closed (fixed) » Active

Reopening because what has been committed is not working for me. On my site I have ALT fields enabled but Title fields are not. The state of 2.x-dev currently requires that the Title field be enabled in order to use ALT fields for captions.

jenlampton’s picture

Here's a follow-up patch that only disables the captions if both title & alt fields are disabled.

minorOffense’s picture

Any chance of conditionally disabling the caption options based on what's enabled? E.g. Only list alt if alt is on, only title if title

slippast’s picture

Hi everyone. I found this issue while looking for a solution to get captions working with the Media module. I took angoo's code from #37, cleaned it up and made it compatible with both title and alt fields. I happen to agree that enabling the Title/Alt fields in the field settings is a bit of a barrier. So I removed that warning from the display settings and made this caption check:

      // Check caption settings.
      if ($display['settings']['caption'] == 1) {
        if ($instance['widget']['module'] == 'media' && isset($item['item']['field_file_image_title_text']) && count($item['item']['field_file_image_title_text'])) {
          $item['caption'] = $item['item']['field_file_image_title_text'][$langcode][0]['value'];
        }
        if ($instance['widget']['module'] == 'file' && isset($item['item']['title'])) {
          $item['caption'] = filter_xss($item['item']['title']);
        }
      }
      elseif ($display['settings']['caption'] == 'alt') {
        if ($instance['widget']['module'] == 'media' && isset($item['item']['field_file_image_alt_text']) && count($item['item']['field_file_image_alt_text'])) {
          $item['caption'] = $item['item']['field_file_image_alt_text'][$langcode][0]['value'];
        }
        if ($instance['widget']['module'] == 'file' && isset($item['item']['title'])) {
          $item['caption'] = filter_xss($item['item']['title']);
        }
      }

I don't love this kind of hackery but the Media module shouldn't be overlooked as a file source. Now Media module Title and Alt fields are working as captions and the switch is in the display settings where I think it belongs.

jenlampton’s picture

@slippast can you post a patch file for us to test?

jenlampton’s picture

Here's a rerolled patch based on #46 and addressing feedback from #47. I don't use media so I'm not sure how to address the feedback left in #48 but if anyone else wants to take a stab at a patch I'd be interested in seeing one.

To address the comment in #47... I agree this is a bit cleaner from a field UI pov. Unfortunately, it won't work for anyone wanting to put an image-with-flexslider field into a panel. The panels settings are unable to take a particular field-instance into account (since that pane may need to work for multiple content types).

I'm not really sure how to rectify this, but have asked for guidance over in ctools land... #2798007: Field instance settings not properly passed into field content pane settings form.

jenlampton’s picture

Okay, I think I've got it. Let's give this a go: