Height Being Calculated Incorrectly

Hi,

I never experienced this issue. The height of the images are calculated in the template_preprocess_field_slideshow function and it should keep the largest dimension it finds. What version of drupal have you installed? (the height is calculated differently if drupal version is less than 7.9)

Hmm, strange. Can you upload the images somewhere and give the image style settings you are using? Because the first thing I need to do to try to fix the issue is reproducing the error.

Maybe one possible issue could be that you defined a (max)-height/width for the images in css.

I have a similar problem in 7.x-1.8. I'm in Drupal 7.18. We are upgrading from Field Slideshow 1.5. In all of the slideshows we're using it for, it calculates div.field-slideshow at 319px high (the height of the image) with 44px of bottom padding. We just upgraded to 1.8, and it calculated div.field-slideshow at 363px high plus 44px padding. So, 44 extra pixels of height (in addition to the 44 px padding) are being tossed in via jQuery, pushing the pager down. I rolled the module back for now. Any chance there's a math error somewhere?

@hanpersand: Is the website online somewhere? I still haven't been able to reproduce the issue. Maybe the error is related to a theme. Are you using a public theme or a custom one?

@idflood It's a custom theme. I had an example for you on our dev site but then we had to roll it back before a security upgrade code push. Here's a working example in version 1.5--this has the correct height for div.field-slideshow: http://actionagainsthunger.org/countries/africa/kenya

I will check in with my team and see if I can put 1.8 back on the dev site. If I can, I will do so and come back and post it for comparison.

Okay. Got it. So, here's the exact same page on the dev site, but with Field Slideshow 1.8: http://dev.actionagainsthunger.org/countries/africa/kenya

If you inspect the div.field-slideshow element, you will see that the JS sets its height at 363px.

In http://actionagainsthunger.org/countries/africa/kenya, the JS sets the height of div.field-slideshow at 319px, which is the height of the actual image.

Let me know if you have questions, and *thank you*!

Great. In my quick test the error appeared only in firefox and not chrome, that is maybe why I haven't been able to reproduce.

So i think the error appeared after including support for responsive layout. This added a function rebuild_max_height at the end of the js which set the height of the slides. The issue is maybe not there but it's my only idea right now.

Near the beginning of this function there is:
return $(this).height();

Maybe you can try to change this to:
return $(this).outerHeight(true);
or
return $(this).outerHeight(false);

But I doubt It will fix the problem, it's just an untested guess. I will try to replicate locally so I can test some more things.

Hey there @idflood. I can't *see* this in Chrome (it doesn't bump the pager down), but the height differences are present on the div when I inspect the element. It's visible in Firefox. So I believe it's present in all browsers.

So I finally reproduced the issue locally. It looks like the "padding" calculation at the top gives completely different results between firefox and chrome.

For reference here are some related issues:

#1053688: Caption shows for only some slides
http://drupalcode.org/project/field_slideshow.git/commitdiff/81c4bdebe7b...

#1085930: Width of picture with border
http://drupalcode.org/project/field_slideshow.git/blobdiff/e13c8054aecbc...

#1166930: The boder of the image is not displayed correctly if only one image
http://drupalcode.org/project/field_slideshow.git/blobdiff/668b38aeaf1e9...

#1228266: Responsive slideshow
http://drupalcode.org/project/field_slideshow.git/commitdiff/0c9d178803e...

So while I've found a quick hackish way to make it work consistently it broke some of these related issue. Eventually the fix should not break these, nor the responsive-slideshow support.

Looks like I've found how to fix it. To simplify the handling of image with border I added the "box-sizing: border-box" to the css of the images. This should work with 99% of the browsers (ie >= 8).

Eventually if the support of ie 7 or less is required then it is the responsibility of the theme to make the necessary adjustments (should be a problem only if there is a border/padding around the image).

After testing with ie7 and 8 it looks like the issue about the border not being displayed correctly is present. For ie7 it's not a surprise but it should have worked on ie8.

http://caniuse.com/#feat=css3-boxsizing
http://caniuse.com/#feat=minmaxwh

edit: apparently ie8 doesn't respect box-sizing with elements having max-width:
http://stackoverflow.com/questions/6742877/anchor-tag-around-fluid-image...

So here is another approach. Instead of using the box-sizing property this adds a span around the images. So instead of adding a border directly you can add the border to this span (it has a class "inner-slide" to be easily targeted).
This has one big benefit: It works even in ie7 and ie8 : )

On the other hand there is one possible problem: It add some little css to the image and .inner-slide span. This can cause visual issues on sites updating to a new version of field_slideshow.

So one solution would be to create a new 7.x-2.x branch. But still I'm not sure it's a good idea. Any suggestion or feedback welcome.

I wonder if it could be a good idea to create a new branch that's the "responsive friendly" branch. The likelihood is high that sites (like mine) that built with Field Slideshow were not responsive. New builds could use the new branch. This would ensure that new CSS and markup wouldn't break legacy implementations. That's just a thought.

We will stay rolled back to 1.5 for now. Thank you!

I've committed the patch in #15 in a 7.x-2.x branch. On a side not the span has been changed to a div, I don't know why I first used a span.

The 2.x branch is not stable yet but I'm marking this issue as fixed.

Manually closing this to cleanup the issue queue. Feel free to reopen if there are still some bug with this.

Hi idflood,

I just tried to apply your patch to 1.82 and I thought it solved the problem. But very rarely, the image will shrink to 1px height.

This happens rarely on Chrome. Looks like IE8 is having major issues though...I say 85% of the time the images are not even showing up. Oddly IE7 looks much better. Safari, which I thought would have similar results with Chrome, has the 1px problem but clears with refresh. Firefox looks pretty good.

Thought I changed the status from fixed to active...

Patch in #15 applied on 1.82 saved my day. Thanks.

sites/all/modules/field_slideshow/field_slideshow.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
It also adds a excess padding on the bottom which could be removed.

diff --git a/sites/all/modules/field_slideshow/field_slideshow.js b/sites/all/modules/field_slideshow/field_slideshow.js
index 80faf3c..7b3f4a5 100644
--- a/sites/all/modules/field_slideshow/field_slideshow.js
+++ b/sites/all/modules/field_slideshow/field_slideshow.js
@@ -31,7 +31,7 @@
});
slideshow.css({
'padding-right': (max_outerWidth - parseInt(slideshow.css('width'))) + 'px',
- 'padding-bottom': (max_outerHeight - parseInt(slideshow.css('height'))) + 'px'
+ // 'padding-bottom': (max_outerHeight - parseInt(slideshow.css('height'))) + 'px'
});

// Add options

I have the problem with image 320px high and it gives me 720px height. Also the slidwwhow is not working anymore. However this when I checked Aggregate JavaScript files in the performance section.

There are no errors in the console. Am not sure if this belongs here or if it is a new issue

In my case, running 7.x-1.82, I have an image that is 210x140 (WxH). All images in my site have a 10px padding all around (to show a matt-frame using a background .png) and a 1px border all around as well. So this adds 22px to width and height.

What I'm getting for the containing div (the one with class "field-slideshow") is a width of 210px and a padding-right of 22px, and a height of 162px (140 + 22) AND a padding-bottom of 22px.

So the width comes out right, though I don't see the need for the 22px padding - just make the width 232px and be done with it. But the height has the 22px already added in PLUS it adds the padding as well. Again, just drop the padding and let the height be the total.

Ok, after applying the patch in #15 (not sure why I never did that before, but I saw that I had applied a different patch at some point - who knows?), I'm still getting the right/bottom borders chopped off.

Here are more clues... My images are 240x240 with a 3px border all around. The screenshots show how my image looks, and the rendered HTML. Note that the wrapping div ("field-slideshow") is still set to w:240 and h:240 - that's why my right/bottom borders are being chopped (plus, as it turns out, 3px of the image itself). When I increased them (in Firebug) to 246px, the images appeared as expected. It's understandable why they are only 240, because it seems they are set in the PHP code, when it can't know the size of the border, and I can't see where they are recalculated and updated in the JS.

The second issue is that the width of each image item (div "field-slideshow-slide") within that wrapper is still 240px, whereas the height is being set (correctly) to 246px. Again, looking in the JS, I can see the recalc for height, but I don't see the corresponding code for width. However, even with it set to 240px, when I increase the wrapper width as stated above, the right border shows. Perhaps it is not within a div that is "overflow: hidden".

As a temporary work-around - in my case, and only for this one site - I can override the w/h of the wrapper to 246x246 because all my images are the same size. But it would be nice if this could be fixed.