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.

CommentFileSizeAuthor
#11 flexslider_maintain-ratio_1938404_11.patch594 bytesGuGuss
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mist’s picture

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');
minorOffense’s picture

Status: Active » Postponed (maintainer needs more info)

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

maartendeblock’s picture

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>

minorOffense’s picture

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.

minorOffense’s picture

Title: Maintain aspect ration while resizing » Maintain aspect ratio while resizing
maartendeblock’s picture

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

philosurfer’s picture

#6 Works.

dzepol’s picture

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

dzepol’s picture

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

hansfn’s picture

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');
GuGuss’s picture

Version: 7.x-2.0-alpha1 » 7.x-1.x-dev
Status: Active » Needs review
FileSize
594 bytes

I confirm that #10 worked for me.

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

minorOffense’s picture

Version: 7.x-1.x-dev » 7.x-2.x-dev
jamescook’s picture

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.

minorOffense’s picture

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.

timqallen’s picture

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.

robcarr’s picture

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

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

robcarr’s picture

Status: Needs work » Needs review

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

minorOffense’s picture

Assigned: Unassigned » minorOffense
jordan8037310’s picture

I can confirm this patch works with 7.x-2.0-alpha3

SchwebDesign’s picture

patch 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!

hansfn’s picture

Status: Needs review » Reviewed & tested by the community

Well, it's confirmed by two users - setting issue to RTBC.

minorOffense’s picture

Status: Reviewed & tested by the community » Fixed

  • minorOffense committed d3d9be0 on 7.x-2.x authored by GuGuss
    Issue #1938404 by GuGuss: Maintain aspect ratio while resizing
    

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.