Since upgrading to alpha 3 my thumbnail image style is not being applied to the navigation thumbnails. They are appearing at their original size no matter the settings.

To replicate this, set up a flexslider field display that uses thumbnails and set the size of thumbnails using an image style.

Comments

dooug’s picture

Version:7.x-2.0-alpha3» 7.x-2.x-dev
Issue summary:View changes

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

gittosj’s picture

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.

John.K’s picture

Priority:Normal» Major

Since this is making people roll-back versions I'm updating it to a major issue.

duckydan’s picture

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.

ebenfarnworth’s picture

I have the same problem.

berliner’s picture

StatusFileSize
new743 bytes
Test request sent.
[ View ]

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.

berliner’s picture

Status:Active» Needs review

Forgot to change status.

berliner’s picture

StatusFileSize
new1.8 KB
Test request sent.
[ View ]

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.

berliner’s picture

StatusFileSize
new1.84 KB
Test request sent.
[ View ]

Even better without annoying notices about unset variables ...

John.K’s picture

Tested the patch in #9 and it works well for me but I would suggest also changing the comments:

// If the thumbnails are enabled in the option set, scan for the first img
// tag and extract the src attribute to set as the thumbnail data'

in flexslider.theme.inc, since that no longer describes what the code does.

This looks like a more elegant solution than the original method.

berliner’s picture

StatusFileSize
new2.02 KB
Test request sent.
[ View ]

Right, comment changed.

John.K’s picture

Status:Needs review» Closed (duplicate)

Berliner, I realised that this is related to #1927818: Image styles have no effect on flexslider images (or thumbnail-pagers) so I've modified your patch to work for the main slide's image style as well. I'm going to post the patch based on your work in that issue now.

So I'm going to mark this issue as a duplicate.

John.K’s picture

Status:Closed (duplicate)» Needs review

My bad, this is still active and the patch in #11 is still pending review. One positive here =]

minorOffense’s picture

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

minorOffense’s picture

Status:Needs review» Closed (won't fix)
John.K’s picture

So if it's removed from the optionset we will be able to set the thumbnail image style on the field formatter instead I take it? Thanks for clarifying the issue.

berliner’s picture

Priority:Major» Normal
Status:Closed (won't fix)» Active

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.

minorOffense’s picture

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.

berliner’s picture

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?

minorOffense’s picture

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)

berliner’s picture

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.

gittosj’s picture

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.

gittosj’s picture

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;
}

Barry Tielkes’s picture

patch #11 worked fine for me. )
Thx!

pingwin4eg’s picture

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

  • Commit bc39515 on 7.x-2.x, startslide by minorOffense:
    Removed image styles [#1927818] and [#2123947]
    
gnaag’s picture

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...

Talkless’s picture

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?