Customizer: Can't crop header images.

[JessBoctor]

Steps to reproduce the behavior

1. Activate a theme that uses a custom header image:
2. Go to My Site > Appearance > Customize > Header Image
3. Click on Add new Image
4. Select and image and then click on Select and crop

What I expected to happen

To be able to crop the image to the correct header size and then save it to the header

What actually happened

When you get to the next screen, there is no cropping selection. Dragging across the image to create a selected section results in Drop image. Clicking on Crop results in the error {file name} There has been an error cropping your image. if there is a Skip Cropping option and you select it, it does not update the header image

There is a video of my test site here: https://d.pr/v/0kpjbn

Context

Customer reported this in #29153016-HC

Browser / OS version

Mac OS 10.15 / Chrome 89

Customer was using Windows 10 with Chrome 83

Is this specific to the applied theme? Which one?

First reported on Dynamic news, but I have also tested Dara and Intergalactic and had the same issues

Does this happen on simple or atomic sites or both?

Simple. The cropping function works as expected on AT sites

Is there any console output or error text?

No

Level of impact (Does it block purchases? Does it affect more than just one site?)

It affects more than one site, but doesn't seem to prevent other editing of the site

Reproducibility (Consistent, Intermittent) Leave empty for consistent.

Screenshot / Video: If applicable, add screenshots to help explain your problem.

[supernovia]

Possible cases here: https://wordpress.com/forums/topic/i-cant-change-my-header-image-2/

And here: 3930683-zd-woothemes

[supernovia]

Noting I'm seeing an intermittent issue related to this, even when using the same thing. Possibly related to image size or format?

https://cloudup.com/cvPrt7xG2eH

[supernovia]

Another case here: https://wordpress.com/forums/topic/cropper-tool-not-working-correctly/

This user was able to crop by making the original image smaller first.

[supernovia]

Another here: https://wordpress.com/forums/topic/unable-to-crop-header-image-2/

Staff was having trouble replicating the issue on the site and we thought it might have something to do with the image size. @aleone89 thought it was because the image was portrait oriented so we might test that some more as well!

[supernovia]

One more here: https://wordpress.com/forums/topic/crop-header-function-not-working-in-twenty-ten/

We thought it was a retired theme issue, but now that we're seeing this in other themes as well we should report it here.

[mrfoxtalbot]

The error message seems to be There has been an error cropping your image

I tried adding really big images (5120 by 2880 pixels) and also adding Pexel images specifically but I could not reproduce it.

[sstabrizi]

I've got another case of this in 29265927-hc. It's a simple site using the Dyad 2 theme. I tried removing the header image and adding a new one. The crop screen loads, but no cropping tools show up. When I click Crop and Save the same error is displayed:

[Robertght]

Another one in 29303036-hc. They had to resize the image to a landscape size.

[JessBoctor]

I had another user report this in #28772653-HC. I advised them to crop the images before uploading to quickly change out the header images.

[mrfoxtalbot]

Another report 4027529-zen

Choosing the "Skip Cropping" image worked in this case.

[khristiansnyder]

Another report in 4022360-zen

[MaxPhilip]

Another report in 4059688-ZD

[jp-imagines]

Another report in 30157043-hc.

[sajmes]

30159555-hc Baskerville 2.

[kwight]

@DanielSmithMichigan @andres-blanco can you look into this in our next sprint please (starting July 12)? ❤️

[aamills]

another report in 29806696-hc

[ahmadbaig1]

4131258-zd

[daria2303]

another report but only for Safari, in Chrome it is working: 31027667-HC

[cometgrrl]

This is happening to me too, on pciE2j-p2. I'm using Chrome. The image is 3400 by 3270.

Oddly, it worked when I uploaded the image, but then I chose not to crop it. When I go through the flow add image -> media library, then it fails to show the cropping controls. I've even tried deleting and re-uploading, and that doesn't work now either.

After resizing the image, the cropping flow works again.

Edit: This tip from @obenland worked for me:

Press and hold the Control key (if using Windows) or Command key (if using Mac OS) and then press the minus key on your keyboard once and then release both. This zooms out your browser window and then suddenly the crop selection tool will appear

[zdenys]

Another case 4368408-zd-woothemes. I shared the workaround from here: https://github.com/Automattic/wp-calypso/issues/50126#issuecomment-850577893

[Robertght]

@kwight is this something the team is still looking into? If not, can we flag it for Flow Patrol?

[kwight]

@Robertght Sure, go for it – this was from the now-complete Design Selection pod.

[Robertght]

Thanks! @yansern I've flagged this one together with https://github.com/Automattic/wp-calypso/issues/50126 as they seem they are similar.

[yansern]

Investigation Note:

1. This is replicable when the browser is Zoomed In (not 100%) before opening the cropping tool.
2. As for themes with custom header, you can use Dara theme (or use feature:custom-header when searching for themes).
3. The repository is core wordpress-develop.
4. The file is wp-admin/includes/class-custom-image-header.php.
5. The underlying issue lies in imgAreaSelect. This plugin is no longer maintained.
6. It is up to us to fix wp-includes/js/imgareaselect/jquery.imgareaselect.js to make sure they render the cropper when browser is zoomed in.

Suspected that it has something to do with the aspect ratio of the image as well (other than just Zoomed browser).

[katiebethbrown]

Another report in 4381029-zd-woothemes

Have asked them to check zoom levels.

[alshakero]

Trac ticket and fix are ready

https://core.trac.wordpress.org/ticket/54308#ticket https://github.com/WordPress/wordpress-develop/pull/1774

[Robertght]

Thank you @alshakero !

[Matrixverse]

Hello, does it someone succeeded to fix this issue?

I tested patch from alshakero but in my case do not work.

Issue still exists.

[katiebethbrown]

Another report in 31340801-hc.

I explained how to set browser zoom back to 100% and that allowed them to crop the image without error.

[katiebethbrown]

Another report in 19941435-hc

Adjusting zoom allowed them to crop successfully.

[sajmes]

17777411-hc the zoom workaround allowed cropping.

[mzitinfo]

WP2 in 4454152-hc

[Robertght]

another 4531154-zen

[masperber]

27339780-hc suggested work around of zooming out in browser worked in this instance

[renata-franco]

Here is one, with Chrome as well 33363337-hc

[rw-ye]

Another report: 33603431-hc Ticket: 4717572-zd-woothemes

Suggested the workaround of zooming out which worked.

[khristiansnyder]

Any updates on this? Still run into this from time to time. #29284878-hc today.

[Sandkorner]

Another one: 4733592-ZEN I had my browser on 100%, but needed to play with the zoom to have the crop rectangle to show up.

[jordesign]

Another case in #4753477-zen

In my further testing I could also recreate locally using the Toujours theme - and this image specifically (in case it's helpful for testing).

[arthur791004]

The root cause is our crop plugin might do calculations with variables not being initialized so that the selection area is gone.

The previous solution works as it avoids the scenario. So I open another PR to ensure those variables are initialized to fix this issue but we still need to wait for the review.

[sajmes]

6175693-hc Twenty Seventeen.

Required user to zoom out to 50% in browser before it worked.

[autumnfjeld]

@JessBoctor Just a tip to directly insert images/gifs from dropler, rather than the link, as the original link is now expired.

bitmoji

[jp-imagines]

Another report in 4796753-zd-woothemes with the (retired) Puzzle theme. I wasn't able to replicate on my end, but the user provided a screenshot of this error. Asked them to try zooming in/out in their browser.

[inaikem]

The previous solution works as it avoids the scenario. So I open another PR to ensure those variables are initialized to fix this issue but we still need to wait for the review.

@arthur791004, is there an update on this? Thanks!

[arthur791004]

@inaikem You can track the ticket here. As this issue is related to the core module, we need to wait for their review.

[metabreakr]

https://wordpress.com/forums/topic/error-editing-image/

Theme: Chateau

[inaikem]

@inaikem You can track the ticket here. As this issue is related to the core module, we need to wait for their review.

Thank you @arthur791004! 🙏

@Automattic/dotcom-triage-pa-group, although it's a core issue this feel slike a good candidate for bulk reply.

Another report in this ticket: 4814602-zd-woothemes

[Robertght]

4821856-zen

[jp-imagines]

Another in 4893175-zd-woothemes

[wpshellbelle]

Another report at 35405431-hc