Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment #1
dooug CreditAttribution: dooug commentedI also experienced this, no matter the choice in the option set, it uses the original image file.
Comment #2
gittosj CreditAttribution: gittosj commentedI'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.
Comment #3
JKingsnorth CreditAttribution: JKingsnorth commentedSince this is making people roll-back versions I'm updating it to a major issue.
Comment #4
duckydan CreditAttribution: duckydan commentedFor what it's worth, I can confirm this issue. I honestly didn't notice it right away because the bandwidth is so good here.
Comment #5
ebenfarnworth CreditAttribution: ebenfarnworth commentedI have the same problem.
Comment #6
berliner CreditAttribution: berliner commentedI 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:
It must be possible to do this in a cleaner way.
Comment #7
berliner CreditAttribution: berliner commentedForgot to change status.
Comment #8
berliner CreditAttribution: berliner commentedOk, 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.
Comment #9
berliner CreditAttribution: berliner commentedEven better without annoying notices about unset variables ...
Comment #10
JKingsnorth CreditAttribution: JKingsnorth commentedTested 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.
Comment #11
berliner CreditAttribution: berliner commentedRight, comment changed.
Comment #12
JKingsnorth CreditAttribution: JKingsnorth commentedBerliner, 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.
Comment #13
JKingsnorth CreditAttribution: JKingsnorth commentedMy bad, this is still active and the patch in #11 is still pending review. One positive here =]
Comment #14
minorOffense CreditAttribution: minorOffense commentedSimilarly 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
Comment #15
minorOffense CreditAttribution: minorOffense commentedComment #16
JKingsnorth CreditAttribution: JKingsnorth commentedSo 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.
Comment #17
berliner CreditAttribution: berliner commentedReopening 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.
Comment #18
minorOffense CreditAttribution: minorOffense commentedFlexSlider 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.
Comment #19
berliner CreditAttribution: berliner commentedHm, 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?
Comment #20
minorOffense CreditAttribution: minorOffense commentedBecause 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)
Comment #21
berliner CreditAttribution: berliner commentedOk, 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.
Comment #22
gittosj CreditAttribution: gittosj commentedI'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.
Comment #23
gittosj CreditAttribution: gittosj commentedIf 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;
}
Comment #24
Barry Tielkes CreditAttribution: Barry Tielkes commentedpatch #11 worked fine for me. )
Thx!
Comment #25
pingwin4egDoes not solve the same problem in views. Even more it breaks thumbs to
src="undefined"
when using flexslider views plugin(Comment #27
gnaag CreditAttribution: gnaag commentedIn 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...
Comment #28
Talkless CreditAttribution: Talkless commentedI 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?
Comment #29
pwiniacki CreditAttribution: pwiniacki commented@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.
Comment #30
amaria CreditAttribution: amaria commented@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.
Comment #31
amaria CreditAttribution: amaria commented