Slideshow container height incorrect if images heights are auto or non-file-size

Created on 23 May 2012, about 13 years ago
Updated 21 July 2025, 10 days ago

Ran into a bit of a doozy getting a correct height in place as we have a responsive site where the images are going to be proportionally scaled down (with CSS, not an adaptive image technique, etc.) to fit on mobile screens. This is sort of connected to #1053688: Caption shows for only some slides β†’

However, because the container (ie class="field-slideshow") has the width and height set inline based on the image file size (ie $variables['slides_max_width']), then if the image size changes all sorts of funkiness occurs (captions cut-off, image size jumping as slides move, etc.).

I've written a first attempt at a patch, which pulls the height out of the template file (would need to be pulled out of the .module file as well, but wasn't sure the right approach so skipped that for now), and then adds height into the JS. I'm guessing there are other cases this may break things for, but thought at least I'd get something rolling.

In the meantime, for those who want a fix without this patch here is what I did:

  1. Copied field_slideshow.tpl.php into my theme templates and removed the height there (line 11)
  2. Added the behavior below to my theme JS file to calculate and set the height (note it is currently only written for a single field slideshow per page, but could be easily extended - just model on the field_slideshow.js code)
    // Set field slideshow container height
    // We need explicit heights for Field Slideshow to correctly size,
    // so need to adjust based on the height of the image (223px on mobile, 345px all else)
    // as well as the caption height (which the Field Slideshow modules factor in with padding-bottom)
    Drupal.behaviors.mobileFPAutoImgSizeFix = {
        attach: function (context) {
            var max_height = 0;
            $('.field-slideshow .field-slideshow-slide').each(function() {
                $this = $(this);
                max_height = Math.max(max_height, $this.outerHeight(true));
            });
            var paddingBottom = parseInt($('.field-slideshow').css("padding-bottom"));
            $('.field-slideshow').height(max_height - paddingBottom);
        }
    };

Ultimately, it would be ideal if an image could just have width and height set to auto, but I know with the position absolute it makes that really tricky (impossible?), so we probably just need an alternative in the meantime.

πŸ› Bug report
Status

Closed: outdated

Version

2.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States sokrplare

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024