WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 4 months ago

#53300 new defect (bug)

Select and Crop for header images, crop area is entire image

Reported by: TylerTork Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: External Libraries Keywords: has-patch
Focuses: Cc:

Description

Using latest Firefox on Windows 10, Twenty Sixteen theme and no plugins. Test site https://z1.torknado.com displays the result of selecting a header of the wrong aspect ratio and "cropping" it in Customize. I uploaded a photo 2560 by 1920 and am trying to use this as the header image. So from Customize I go to Header Image, Add new image, select my image already in the library, and click Select and crop. The cropping screen opens but there is not a cropping rectangle of the suggested dimensions (1200x280) or of any dimensions. The Crop image button is active, and if I click it, produces a "cropped" copy the same dimensions as the original image.

Oddly, if I repeat the same steps but this time select the "cropped" copy instead of the original (actually "scaled") image, I do get the correct cropping rectangle on the cropped image. It's notable that while the original and so-called cropped version have the same dimensions, the cropped one is a much smaller file size.

Original image: https://z1.torknado.com/wp-content/uploads/2021/05/IMG_0373.jpg doesn't appear in the media library screen.
Image as "scaled" by the uploader: https://z1.torknado.com/wp-content/uploads/2021/05/IMG_0373-scaled.jpg
"Cropped" image: https://z1.torknado.com/wp-content/uploads/2021/05/cropped-IMG_0373-scaled-2.jpg

I observed a similar problem with a different theme (Graphene). In that case the image was scaled to their required dimensions, so it was distorted to show the whole picture. Oddly, this occurred with the cropping step, not just with display. The thumbnail in the media library was wrong, not just the display on the page.

Change History (7)

#1 @sabernhardt
6 months ago

  • Component changed from General to Customize

#2 @swissspidy
5 months ago

  • Severity changed from major to normal

Wow, that img selection library core uses is super old (9 years without updates).

It's a known bug there: https://github.com/odyniec/imgareaselect/issues/71#issuecomment-404979992

Since WP is already using a patched version, that fix could be added there as well.

#3 @spacedmonkey
4 months ago

  • Keywords needs-patch added

For context, I believe we have found this same issue while working on our plugin Web stories. Here is the original issue.

This change as documented in the ticket seems reasonable to me

   imgWidth = Math.ceil($img.innerWidth());
   imgHeight = Math.ceil($img.innerHeight());

This ticket was mentioned in PR #1528 on WordPress/wordpress-develop by spacedmonkey.


4 months ago

  • Keywords has-patch added; needs-patch removed

Ensure that image selector use widths and heights use whole numbers.

Trac ticket: https://core.trac.wordpress.org/ticket/53300

#5 @spacedmonkey
4 months ago

Added a patch at #1528.

The patch is simple, ensure that whole numbers are used for width/height and inner width/height.

This ticket was mentioned in Slack in #core-media by spacedmonkey. View the logs.


4 months ago

#7 @swissspidy
4 months ago

  • Component changed from Customize to External Libraries
  • Milestone changed from Awaiting Review to Future Release
Note: See TracTickets for help on using tickets.