wp-calypso
wp-calypso copied to clipboard
Automattic
Customizer: Can't crop header images.
Steps to reproduce the behavior
- Activate a theme that uses a custom header image:
- Go to My Site > Appearance > Customize > Header Image
- Click on
Add new Image - 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.
Possible cases here: https://wordpress.com/forums/topic/i-cant-change-my-header-image-2/
And here: 3930683-zd-woothemes
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
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.
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!
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.
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.
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:
Another one in 29303036-hc. They had to resize the image to a landscape size.
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.
Another report 4027529-zen
Choosing the "Skip Cropping" image worked in this case.
@DanielSmithMichigan @andres-blanco can you look into this in our next sprint please (starting July 12)? ❤️
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
Another case 4368408-zd-woothemes. I shared the workaround from here: https://github.com/Automattic/wp-calypso/issues/50126#issuecomment-850577893
@kwight is this something the team is still looking into? If not, can we flag it for Flow Patrol?
@Robertght Sure, go for it – this was from the now-complete Design Selection pod.
Thanks! @yansern I've flagged this one together with https://github.com/Automattic/wp-calypso/issues/50126 as they seem they are similar.
Investigation Note:
- This is replicable when the browser is Zoomed In (not 100%) before opening the cropping tool.
- As for themes with custom header, you can use Dara theme (or use
feature:custom-headerwhen searching for themes). - The repository is core
wordpress-develop. - The file is
wp-admin/includes/class-custom-image-header.php. - The underlying issue lies in
imgAreaSelect. This plugin is no longer maintained. - It is up to us to fix
wp-includes/js/imgareaselect/jquery.imgareaselect.jsto 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).
Another report in 4381029-zd-woothemes
Have asked them to check zoom levels.
Trac ticket and fix are ready
https://core.trac.wordpress.org/ticket/54308#ticket https://github.com/WordPress/wordpress-develop/pull/1774
Hello, does it someone succeeded to fix this issue?
I tested patch from alshakero but in my case do not work.
Issue still exists.
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.
Another report in 19941435-hc
Adjusting zoom allowed them to crop successfully.