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

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

attiks’s picture

IE8 will probably be a problem, but not sure if it is possible to work around it.

Talkless’s picture

So using Fallblack images is actually official way to select image style for thumbnails?

das-peter’s picture

@Talkless Is there a chance you pack your configuration into a feature? This would help to ensure the reproduction for debugging is done right.

Talkless’s picture

Talkless’s picture

@das-peter please check new uploads.

das-peter’s picture

If 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:

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

", $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:

So using Fallblack images is actually official way to select image style for thumbnails?

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.

Talkless’s picture

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

attiks’s picture

@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

Jelle_S’s picture

Status: Active » Closed (won't fix)

Since this is an upstream issue, this issue is a won't fix for us, unless they fix it upstream ofcourse.

Talkless’s picture

I've walk-arounded it using some javascript (as always, isn't it?) and browserclass module:

Drupal.behaviors.mymodule = {        
  attach: function (context, settings) {               
        //for every <picture> in IE8 browser, fix fallback image url:  
        jQuery("body.ie8 picture").each(function(index, elem) {                
                var picture = jQuery(elem);
                //take url of biggest image:
                var imageUrl = picture.children("source").last().attr("srcset");
                //set it to fallback img tag:
                picture.find("img").attr("src", imageUrl);              
        });  
  }
};

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.