Something changed between the 1.x-dev version prior to 2012-Mar-26 and the current dev & beta2 version.

The flex slider images are being rendered with the height & width values set in html, so when resizing the height remains fixed & the images loose proportion, the width;100%; is taking precedent.

My setup is as follows…
Views slideshow listing fields of in a 'slideshow view' type. The image is provided by a media field, with the 'Original' view mode.

The output has the width & height if I use the current 7.x-1.0-beta2 or the 7.x-1.x-dev.
If I revert the module to a version of 1.x-dev before the Mar 26 the images don't have the width & height settings in the html.

It seems the formatter has changed the theming.

Comments

minorOffense’s picture

minorOffense CreditAttribution: minorOffense commented

I'll check and if that's the case then I'll have to adjust the image theme or image styles.

I'll report back here later today.

Thanks!

cborgia’s picture

cborgia CreditAttribution: cborgia commented

Same Issue.

drupov’s picture

drupov CreditAttribution: drupov commented

Yep, I can confirm that issue too.

minorOffense’s picture

minorOffense CreditAttribution: minorOffense commented
Assigned: Unassigned » minorOffense

You're right, those should be removed. I'm curious why the flexslider library doesn't remove those attributes on its own when it initializes...

I'm working on this right now. I'll post an update once I have a potential fix.

Thanks!

drupov’s picture

drupov CreditAttribution: drupov commented

No, we thank! :)

minorOffense’s picture

minorOffense CreditAttribution: minorOffense commented
Status: Active » Needs review

I've added to the flexslider.load.js file some code to remove the "width" and "height" attributes to the images. Since you only want to remove those values when flexslider is initialized, it's fine to leave this as a javascript only feature.

I'll also suggest to the Flex Slider library maintainer to maybe including this changes in the library directly.

Please test the commit and let me know.

See http://drupalcode.org/project/flexslider.git/commit/c40659f

drew reece’s picture

drew reece CreditAttribution: drew reece commented

That works for me, I stupidly thought the images (or just one image) would show up without JS enabled, which would mean the sizing would need to be removed from the code, not via JS.
I think I can stuff a <noscript>[image_field]</noscript> in the view header to provide a fallback for non-js users, obviously it still has the scaling issue.

I was wondering if a preprocess function could handle it, see chx's comment on …
http://drupal.stackexchange.com/questions/14866/drupal-7-9-and-flexible-... I just cant see a way to tell if it is a flexslider image.

Anyway, thanks minorOffense, #6 seems to do the job.

minorOffense’s picture

minorOffense CreditAttribution: minorOffense commented
Status: Needs review » Closed (fixed)

Yeah that was my problem as well. Ideally you'd remove that attribute from your images if you know that image style should use width/height. But that's a decision I think each site builder will have to make and create their own image style/preprocessor or theme_image implementation.

Well the images should display without javascript, but just at their defined size. But I think that's beyond scope of what Flex Slider should be playing with.

The code will be in a new dev build once d.o gets to it and in the next release for Flex Slider.

Thanks!

drew reece’s picture

drew reece CreditAttribution: drew reece commented

Cheers,

There is a rule on line 20 of flexslider.css…
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */

It just means there is no fallback without JS enabled, I think I can just use media_responsive to strip out the sizes of a image. Seems like a reasonable workaround.

  • Commit c40659f on 7.x-1.x, youtube, 8.x-2.x, startslide by minorOffense: 
    Fix for width/height issue [#1507672] Adjusted naming of Flex Slider...