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.

Files: 
CommentFileSizeAuthor
#11 flexslider_maintain-ratio_1938404_11.patch594 bytesGuGuss
Test request sent.
[ View ]

Comments

I resolved this issue by editing flexslider\assets\js\flexslider.load.js
and changing selectors at line 35 and 36:

    $(this).find('ul.slides > li > img').removeAttr('height');
    $(this).find('ul.slides > li > img').removeAttr('width');

to

    $(this).find('ul.slides li img').removeAttr('height');
    $(this).find('ul.slides li img').removeAttr('width');

Status:Active» Postponed (maintainer needs more info)

Can you post the markup generated by your views for your sliders?

Status:Postponed (maintainer needs more info)» Active

I had the same issue and the above fix worked.

This is the generated html:

<div
class="block block-views contextual-links-region block-slideshow-block block-views-slideshow-block odd block-without-title"
id="block-views-slideshow-block">
<div class="block-inner clearfix">
<div class="contextual-links-wrapper">
<ul class="contextual-links">
<li class="views-ui-edit first"><a
href="/admin/structure/views/view/slideshow/edit/block?destination=node">Edit
view</a></li>
<li class="block-configure last"><a
href="/admin/structure/block/manage/views/slideshow-block/configure?destination=node">Configure</a></li>
</ul>
</div>
<div class="content clearfix">
<div
class="view view-slideshow view-id-slideshow view-display-id-block view-dom-id-76b3e458d118c41386b44c0083eada6c">
<div class="view-content">
<div id="flexslider-1" class="flex-flexslider flexslider">
<ul class="slides">
<li>
<div class="views-field views-field-field-slide-image">
<div class="field-content">
<img typeof="foaf:Image"
src="http://kickstart2.local/sites/default/files/styles/flexslider_full/public/slide/image/sd14-la-001.jpg?itok=SeHG0oyQ"
width="800" height="500" alt="" />
</div>
</div>
</li>
<li>
<div class="views-field views-field-field-slide-image">
<div class="field-content">
<img typeof="foaf:Image"
src="http://kickstart2.local/sites/default/files/styles/flexslider_full/public/slide/image/sd14-la-002.jpg?itok=Y8Kq2Gg5"
width="800" height="500" alt="" />
</div>
</div>
</li>
<li>
<div class="views-field views-field-field-slide-image">
<div class="field-content">
<img typeof="foaf:Image"
src="http://kickstart2.local/sites/default/files/styles/flexslider_full/public/slide/image/sd14-la-004.jpg?itok=nQkFNpIk"
width="800" height="500" alt="" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

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

Title:Maintain aspect ration while resizingMaintain aspect ratio while resizing

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

#6 Works.

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

#1 works for me. Allows for link to content while maintaining aspect ratio.

I 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

    $(this).find('ul.slides > li > img').removeAttr('height');
    $(this).find('ul.slides > li > img').removeAttr('width');

with
    $(this).find('ul.slides > li img').removeAttr('height');
    $(this).find('ul.slides > li img').removeAttr('width');

Version:7.x-2.0-alpha1» 7.x-1.x-dev
Status:Active» Needs review
StatusFileSize
new594 bytes
Test request sent.
[ View ]

I confirm that #10 worked for me.

Here is a patch which handles that on the latest 2.x Dev version.

Version:7.x-1.x-dev» 7.x-2.x-dev

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

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

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

Issue summary:View changes
Status:Needs review» Needs work

Patch at #11 doesn't seem to work (tried in in FF and Chrome)

Status:Needs work» Needs review

My bad, seems to target the height and width attributes. All feels a bit delicate, though...

Assigned:Unassigned» minorOffense