Thumbnail image style is not being applied

I also experienced this, no matter the choice in the option set, it uses the original image file.

I've suffered with this bug too so have rolled back to 7.x-2.0-alpha1 and the thumbnails are back to a consistent size. The issue with alpha-2 and alpha-3 is that the aspect ratio of the thumbnails is being preserved rather than cropped so that rather than displaying in neat rows, they are of variable heights with corresponding gaps.

For what it's worth, I can confirm this issue. I honestly didn't notice it right away because the bandwidth is so good here.

I have the same problem.

I can confirm this too. The attached patch solves this problem for me.
I'm not sure what to think about this approach. The theming implementation in this module seems rather complicated and convoluted. For my taste, I had to spend too much time fixing this. And I don't really like the way that flexslider has to preg_match an already generated image tag in order to retrieve the url to the original image:

preg_match("<img.+?src=[\"'](.+?)[\"'].+?>", $item, $src);

It must be possible to do this in a cleaner way.

Forgot to change status.

Ok, that didn't work. Simply replacing the style part of the url doesn't work with Drupals itok security feature.
This patch should fix it. At least for the field output. Didn't look into the views stuff for the moment because I don't use that.
Maybe this helps someone.

Even better without annoying notices about unset variables ...

Right, comment changed.

Similarly to the other issue, I'm removing the option to set the image style from the optionset. Fields and Views give you control over the image style already.

It's a setting that is a relic of FlexSlider 1.x and won't be supported in 2.x

Reopening because in this case (Optionset beeing removed from the fields display settings) it would be necessary to add an option for the thumbnails style in the field display settings.

FlexSlider uses the original source images as the thumbnails. It doesn't load a second set of images.

See here for an example: http://flexslider.woothemes.com/thumbnail-controlnav.html

The only time there's a second set is when you use FlexSlider with sync enabled on a second slider. In that case, you'd have a second slider on the page with it's own image style settings.

Hm, ok. This might sound like a good solution, but it lessens display flexibility. Image styles is not only about file size, but might be about image ratio too. E.g. my current use case needs the thumbnails to have a fixed width but flexible height. That wouldn't be possible with image styles being respected.

Can you give a reason for your plans? Is this something that is not possible anymore with the flexslider library?

Because FlexSlider 2 supports arbitrary HTML in the slides, there's no way to guarantee that people are using an image or that an image in the slide needs a style attached to it.

So instead I assume the images are preset to their width/height and render the slider.

You can still control the size of the image using the display settings on Fields and in Views. But for the thumbnails, you'll have to play with your styles or look into the FlexSlider API to figure out how to better control them (or use the sync slider method of adding thumbnails http://flexslider.woothemes.com/thumbnail-slider.html and set the image style for that slider)

Ok, thanks for explaining. In the drupal context of a field formatter, do you plan to allow more field types for the flexslider formatter in flexslider_field.module, other than 'image' and 'media' that are currently supported? In that case I understand your concerns. It wouldn't seem like the best choice though to combine everything together. Maybe you could provide a "flexslider_image" formatter that can be configured with image styles for slide and thumbnail. Basically the code is already there, and the use case seems like a quite common one.

I would expect something like that to create a flexible slider in the UI without having to hook into the API myself and I don't see any obvious reason not to support this. Just because the flexslider library itself supports arbitrary HTML it doesn't mean that you can't provide sensible default formatters for common cases.

I'm probably not reading carefully enough but I'm confused! Are we going to pull this patch into alpha4 / beta1 or will be define thumbnail display with a field / style? You can see how I'm using them here: http://www.lacape.co.uk
The image is being scaled to a standard width and varying height depending on aspect ratio but I'm keeping the thumbnails to a standard cropped size.

If anyone else is struggling with this then here are the css changes I've made to workaround the problem of wanting thumbnails with a fixed aspect-ratio despite variable aspect-ratio images as well as a responsive design that works for a variety of screen resolutions.

1) We first set the li element that contains the thumbnails so that there are 5 in each row with a 100px /10 rem fixed height. I use rem for the responsive design with a "px" fallback.
2) We then size the image to a minimum height of 100px / 10rem so they always fill the container even on small screens and the overflow spills off the side and is hidden.

This is definitely a workaround rather than a solution since at small screen sizes the thumbnails are taller than their width which looks less good. I have to use a @media query to reduce the height of the container which fixes it. Interested to see if anyone has a better solution.

Should we include some info on this in the documentation so that new users don't give up when they get jumbled thumbnails?

ol.flex-control-thumbs li {
width: 20%;
height: 120px;
height: 12rem;
overflow: hidden;
}
ol.flex-control-thumb img {
min-width: 20%;
min-height: 120px;
min-height: 12rem;
}

patch #11 worked fine for me. )
Thx!

Does not solve the same problem in views. Even more it breaks thumbs to src="undefined" when using flexslider views plugin(

In alpha3, there was an option to set image style for the thumbnails that wasn't working. In latest dev version, this option is no more there. If I understand it well, there is no way to use different image style for picture and the thumbnails in the slider. This regression made me abandon flexslider. Pity...

I have same problem, while using Flexlider Picture module.

I've switched from Galleria because Flexslider (kinda) supports Picture (with Flexslider Picture), so I've made Flexsldier gallery responsive where only big-enougth images are loaded. Though since thumbnails for navigation use original images (that I discovered a bit late), browser downloads smaller (for main view) and big original version (for thumbnail?!) of same image. So long practical responsiveness :) .

I've reported it here: https://www.drupal.org/node/2335719 .
Screenshot with explanation: https://www.drupal.org/files/issues/flexslider_picture_explanation.png .

So what's the status? Will that patch be officially accepted and new version released any time?

@gnaag - exactly the same issue here.

Can somebody confirm that Flexslider with other Flexslider as a Thumbnails Slider only is working correctly? Cause I can't get it to work even with examples - d 7.41, latest greens of all needed modules and latest version of flexslider library.

One flexslider with thumbnails is working fine but then you can't add image style to thumbnails so it's pointless.

@pwiniacki - Flexslider with another Flexslider as thumbnail slider does work. You just have to make sure you have the JQuery Update module enabled so that you can set the the jquery version to 1.7 or higher.

Also, one flexslider with thumbnails works if you use the Picture module with a fallback image. Just don't enable the flexslider_picture module.