I am using FlexSlider 7.x-2.0-alpha3+5-dev (FlexSlider 2.2.2 JavaScript lib.), with FlexSlider Views Style to make "frontpage gallery" with thumbnail navigation.
I've set up breakpoints, picture mapping etc. Everything looks quite OK (at first glance) - in smaller screens it does load smaller images as expected.
BUT, quite some time later I noticed that it still extra loads biggest style image for thumbnail! I can see that by using "View image" browser menu item, Firebug or in Apache logs. So after quite some struggling to make responsive gallery, it is become actually pointless and even more resource hungry, as two images now are loaded in any case.
I discovered that "Fallback image style" setting in Views Style can be used to change thunbmail image size, but that's not quite OK as it's also used as main image style in IE8, as "fallback" is expected there, so it looks resized and blurry.
Is this a bug, missing feature (in flexslider , flexslider_picture, views style..?) or I am missing some settings?
Thank you.
EDIT:
I've added screenshot with explanation, and SQLite-based test site archive so you can extract and test (login: admin admin).
Comment | File | Size | Author |
---|---|---|---|
#4 | flexslider_picture_explanation.png | 380.97 KB | Talkless |
#4 | flexslider.test.drupal.tar_.gz | 11.32 MB | Talkless |
Comments
Comment #1
attiks CreditAttribution: attiks commentedIE8 will probably be a problem, but not sure if it is possible to work around it.
Comment #2
Talkless CreditAttribution: Talkless commentedSo using Fallblack images is actually official way to select image style for thumbnails?
Comment #3
das-peter CreditAttribution: das-peter commented@Talkless Is there a chance you pack your configuration into a feature? This would help to ensure the reproduction for debugging is done right.
Comment #4
Talkless CreditAttribution: Talkless commentedComment #5
Talkless CreditAttribution: Talkless commented@das-peter please check new uploads.
Comment #6
das-peter CreditAttribution: das-peter commentedIf I see correctly in the latest version (dev) of flexslider the image style settings (thumbnail) are removed from the optionset configuration. Which means there's also no more thumbnail configuration.
As far as I can tell flexslider was always built to simply re-use the normal display image to use as thumbnail path:
", $item, $src);
if (!empty($src[1])) {
$attributes['data-thumb'] = $src[1];
}
?>
Picture Flexslider just took the approach and adjusted the regular expression to match to
srcset
.And
<img srcset
is built with the fallback image configuration.So:
I guess so. However I would recommend to try another approach for a true responsive experience.
Flexslider provides the option to use a options set as navigation for another optionset / another flexslider. Setting
Use as navigation
- here you've to insert a CSS selektor for the other flexslider.I would attempt to create another views attachment that renders the navigation. Using the views settings to provide proper css classes for the wrappers should enable you then to use the flexslider configuration.
Comment #7
Talkless CreditAttribution: Talkless commentedOh well...
I might try Views attachment, but I just discovered that Picture uses picturefill.js? Shouldn't it add support for IE8? If it would work, I could just set fallback image to very small thumbnail and forget about this issue. But now, on IE8, picture fallbacks of picturefill.js bug..?
Comment #8
attiks CreditAttribution: attiks commented@das-peter thanks for the info.
#7 You might need another polyfill to add support for old IE versions, to be honest we no longer support IE 8, so not really sure what to use. You can try creating an upstream issue at https://github.com/scottjehl/picturefill/issues
Comment #9
Jelle_SSince this is an upstream issue, this issue is a won't fix for us, unless they fix it upstream ofcourse.
Comment #10
Talkless CreditAttribution: Talkless commentedI've walk-arounded it using some javascript (as always, isn't it?) and browserclass module:
Now, in IE8, it will use biggest image from srcset, and at the same time fallback/thumbnail image can be as small as possible for faster loading.