Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
Hi,
I am using Flex Slider 7.x.2.0-alpha 1 in views to display some promoted images on front page, and I noticed that in 2.0 branch there is a problem with height of an element while resizing. It doesn't change, and therefore the aspect ration isn't kept. In 1.0 branch it works.
Btw. THX for great module.
Comment | File | Size | Author |
---|---|---|---|
#11 | flexslider_maintain-ratio_1938404_11.patch | 594 bytes | GuGuss |
Comments
Comment #1
mist CreditAttribution: mist commentedI resolved this issue by editing flexslider\assets\js\flexslider.load.js
and changing selectors at line 35 and 36:
to
Comment #2
minorOffense CreditAttribution: minorOffense commentedCan you post the markup generated by your views for your sliders?
Comment #3
maartendeblock CreditAttribution: maartendeblock commentedI had the same issue and the above fix worked.
This is the generated html:
Comment #4
minorOffense CreditAttribution: minorOffense commentedMy issue with changing the selector from direct child to any child is that if you have another image in the slide which you want to retain a certain size it will be removed. Mind you, probably shouldn't be doing so with img tag attributes.
I'll mull it over.
Comment #5
minorOffense CreditAttribution: minorOffense commentedComment #6
maartendeblock CreditAttribution: maartendeblock commentedTo others with the same problem:
Flexslider assumes you have ul, li, and img directly nested without any divs in between. But Drupal/Views really (really, really) likes to wrap fields in divs.
You can change this by:
1) clicking your field, open 'Style settings', click 'Customize field HTML' en setting it to - None -.
2) clicking 'Settings' next to 'Fields' in 'Format' and uncheck 'Provide default field wrapper elements'
If you don't use fields, but you use 'Content', try using the Display Suite module. It has options to remove a lot of divs (I haven't tested it with flexslider yet).
Comment #7
philosurfer CreditAttribution: philosurfer commented#6 Works.
Comment #8
dzepol CreditAttribution: dzepol commented#6 works as long as your showing just an image. When you tell the image to link to content the anchor tag causes the same problem.
Comment #9
dzepol CreditAttribution: dzepol commented#1 works for me. Allows for link to content while maintaining aspect ratio.
Comment #10
hansfn CreditAttribution: hansfn commentedI just want to confirm comment 8 - the fix in comment 6 is fine as long as your showing just an image. When you want the image to link somewhere (like you very often want with a slideshow), the problem is back.
I ended up editing sites/all/modules/flexslider/assets/js/flexslider.load.js (like in comment 1) but less intrusive - replacing
with
Comment #11
GuGuss CreditAttribution: GuGuss commentedI confirm that #10 worked for me.
Here is a patch which handles that on the latest 2.x Dev version.
Comment #12
minorOffense CreditAttribution: minorOffense commentedComment #13
jamescook CreditAttribution: jamescook commentedI haven't researched this thoroughly but I wonder if this is related to
https://drupal.org/node/1927818
Image Styles Have no affect on flexslide images.
Comment #14
minorOffense CreditAttribution: minorOffense commentedThe selector on the javascript may need to be adjusted as in #10. Though if we remove the child marker, we remove the height value from ALL images, not just the first one in the slide (or direct child images).
Maybe there's a better way or a way to tell the JS which images to clear the height attr from. Or just remove from all and assume that the images are set to the right size as #10 does.
Comment #15
timqallen CreditAttribution: timqallen commentedJust want to throw in there that I was having issues with the aspect ratio, but I also had this issue https://drupal.org/node/2017219. I had a faulty installation, and reinstalling the module fixed everything!
EDIT: the reinstallation fixed the initially loaded image aspect ratio, but did not fix the resizing issue.
Comment #16
robcarrPatch at #11 doesn't seem to work (tried in in FF and Chrome)
Comment #17
robcarrMy bad, seems to target the height and width attributes. All feels a bit delicate, though...
Comment #18
minorOffense CreditAttribution: minorOffense commentedComment #19
jordan8037310 CreditAttribution: jordan8037310 commentedI can confirm this patch works with 7.x-2.0-alpha3
Comment #20
SchwebDesign CreditAttribution: SchwebDesign commentedpatch in 11 worked for me. I think this should be committed soon. It was a huge headache to try and fix in CSS until i found this thread :) thanks for this patch!
Comment #21
hansfn CreditAttribution: hansfn commentedWell, it's confirmed by two users - setting issue to RTBC.
Comment #22
minorOffense CreditAttribution: minorOffense at Coldfront Labs Inc. commented