Product image distorted by image swap

[jasehead]

I have some products with as many as 10 thumbnail images - sometimes a mix of square, portrait or landscape.  I often use one square image as the main image to keep the thumbnails on the category page the same size.

In 6.0.12, hovering over thumbnails with different dimensions caused the size of the main image to change size and the thumbnail gallery would jump position.  This was discussed here (Image Gallery Bounces #1449): https://github.com/cubecart/v6/issues/1449

However, in 6.1.14 if the main image is square then all portrait and landscape images are squished to be square as well.

Because a number of changes were made as a result of #1449, is there a workaround that would adjust the image container to the largest height rather than squish all images to the dimensions of the main image?  If the largest height can't be predicted, then maybe use the largest height found so once the thumbnail gallery jumps to a new position it won't jump back again.

Edited April 28, 2018 by jasehead

[bsmither]

Is there a web address where we can see this?

[jasehead]

Sorry, I avoid posting links to my own site for security.

However, this page with vertical thumbnails shows the effect (store running 6.1.13).  The main image is square and the subsequent landscape images are distorted to the square shape.
http://www.cam-equestrian.com/product-rage/equestrian-sports-cams/sj4000-equestrian-camera-1080p-full-hd-dvr.html

The distortion occurs on the initial page load. Reloading the page seems to change things - maximum display height of any image seems to become the minimum height of any cached landscape image for the product. In Safari I can "Reload Page from Origin" to avoid cached files (or Force Reload in Chrome) - in Firefox I think it's Ctrl + Shift + R (Windows, Linux) or Command + Shift + R (Mac).

On my own site, I use a horizontal gallery of thumbnails.

Edited April 28, 2018 by jasehead

[jasehead]

To stop the distortion...

Without looking at any code, I'm thinking that CubeCart probably assumes that if an image is not square, then the height will be greater than the width (portrait view) so the height will be 100% (of the main image) and the width will be auto.  The images to swap haven't been loaded yet so that's why a landscape image gets distorted into the size and shape of the main image (if you reload the page then the images are loaded from the cache so the size is already known).

What I would like is for the largest dimension (height OR width) to be 100% and the other to be auto.

The thumbnails are already generated on the page, so a height vs width ratio could be calculated from the thumbnail after the page has rendered but before the image swap occurs - the ratio would tell the image swap which value to set at 100% and which should be auto.  This method would shrink larger images to the maximum height or width of the main image.

---

It might also be possible to set the container for the main image to the maximum height of the other images for that product by estimating using the thumbnails.  The thumbnails and other content wouldn't jump around, but there may be some white space if the main image is short and another image is quite long.

---

Making all images the same 800 x 800px is the obvious advice (or same image dimensions per category or per single product), but a difficult request when you're looking at thousands of products over the years.

Edited April 28, 2018 by jasehead

[jasehead]

Looking at the code, I can see that the start of 2.cubecart.js sets the min and max height:

    if($('a.open-clearing img#img-preview').length) {
        $('a.open-clearing img#img-preview').load(function() {
            var ip = $('a.open-clearing img#img-preview');
            var ip_height = ip.height();
            var ip_width = ip.width();
            var min_height = ip_width * 0.7;
            if(ip_height<min_height) {
                ip_height = min_height;
            }
            $('a.open-clearing img').css({'min-height':ip_height+'px', 'max-height': ip_height+'px'});
        });
    }

So if the original/main image for a product is 407x407px, then any subsequent images swapped by hovering over thumbnails may also have their min and max height set to 407px.

I'm attempting to swap the square image with a landscape (500W x 224H) - so the display size should be 407W x 182H

The min_height would be ip_width (407) x 0.7 = 285, so if I'm reading the code right then my landscape image at 182H is less than 285H so the minimum height is then set to 407H and my landscape image is stretched to be a square.

Edited April 29, 2018 by jasehead

[jasehead]

I've decided is to move the thumbnails from under the main image to under the Add to Basket button for medium-up, and under the image AND Add to Basket for small-only.  I'll post the code when I'm happy with the layout - it looks good so far, except on small view when there are only a few thumbnails under the main image.

What I would like to do for small-only is to have the thumbnails show in position depending on how many thumbnails there are.  If there are 4 or less, then even on small view still show under the Add to Basket Button (as per medium-up).  If there are more than 4 thumbnails then show under the main image AND Add to Basket (currently my default for small view).

Is there any way I can do that?