Two images showing in cropper, one pre-scaled

Questions / Help
1

Hello. As best I can tell, I am encountering a bug when using openDialog to call an uploadcare dialog with cropping enabled. My code is as follows:

jQuery("#uc-button").click(function() {
    uploadcare.openDialog(null, 'file', {
        publicKey: '<public key>', 
        crop: '8:10', 
        tabs: 'file'
    });
});

And it is triggered via this button:
<div id="uc-button" class="btn btn-large w-full justify-center cursor-pointer">Select Image</div>

Everything seems fine except that when selecting an image, the image shows up twice in the crop dialog, once at its full uncropped size in the background, and another version on top of it that has been scaled to the size of the cropper. The cropper mechanism only allows me to resize the distorted/scaled version. See below:

Screen Shot 2020-07-21 at 3.00.36 PM
Screen Shot 2020-07-21 at 3.00.36 PM918Ă—671 545 KB

Screen Shot 2020-07-21 at 3.02.47 PM
Screen Shot 2020-07-21 at 3.02.47 PM912Ă—672 506 KB

Any ideas on what might be causing this problem would be appreciated!

thanks,
Alex

2

Hello, an update to this: I am using this on a wordpress site, and it seems to only be happening on WooCommerce product pages. I put it on a non-woocommerce page and the issue did not persist. I then tried it on an entirely differnet site on a woocommerce product and it behaved the same. Not sure what the conflict could be…

3

Hi @orders,

Sorry for the radio silence! It may be related to some CSS being added by WooCommerce. Can you please set up a test WooCommerce page so that we can replicate the problem and figure out what’s going on?

4

Hello, no problem on delay, I’m sure its busy! The page where this is happening is here: Test Product – LightSource. Click “select image” to launch the dialog and select a JPG or PNG to see the issue.
Thanks,
Alex

5

Thank you for sharing this! The problem stems from the global CSS rule applied to every image element on the page. The source CSS file is https://dev-lightsource.pantheonsite.io/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=4.2.2.

.woocommerce img, .woocommerce-page img {
    height: auto;
    max-width: 100%;
}

The max-width property breaks the image in the widget preview. Disabling this CSS rule should fix the problem.

Hope that helps!

6

Oof, so simple…I assumed it had to be something more complicated. I will give this a try thanks!

1 Like