Make WordPress Core

Opened 9 months ago

Closed 12 days ago

Last modified 12 days ago

#41242 closed defect (bug) (fixed)

Image crop not working in mobile screen.

Reported by: yahil Owned by: adamsilverstein
Milestone: 5.0 Priority: normal
Severity: normal Version:
Component: Media Keywords: needs-patch commit
Focuses: ui, administration Cc:


Hello Team,

I am trying to crop the image from a mobile device, but it's not working. is there any solution?

Dashboard -> media -> select media -> edit image

Attachments (1)

41242.diff (1.0 KB) - added by adamsilverstein 8 months ago.

Download all attachments as: .zip

Change History (18)

#1 follow-up: @adamsilverstein
8 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

Hello, @yahil and thanks for the bug report.

Can you give some more specific information about the device/os/screen size you are using? Also, how are you reaching the crop feature, from the media library?

I tried testing this and saw several issues including the cropper not working and the details screen overlay blocking/covering the grid.

#2 @melchoyce
8 months ago

  • Milestone Future Release deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Duplicate of #30634.

#3 @adamsilverstein
8 months ago

@melchoyce thanks for linking this up with the other ticket, I was guessing there was already one open.

I wonder if the reporter was referring to cropping in the customizer/site icon, or cropping from the media grid/media manager (click an image, then click edit). in the media manager context i tested and couldn't get cropping to work at all, i can't even start the selection process. in addition, there is a ui problem where the image details pane covers part of the grid.

#4 in reply to: ↑ 1 @yahil
8 months ago

  • Resolution duplicate deleted
  • Status changed from closed to reopened

Yes, sure.
I am using a phone with below specifications:
Phone: Xiaomi Mi 4i smartphone
OS: Android
Display: 5.00-inch touchscreen

This issue is occurring with all mobile devices ( as per my knowledge ). However, it is working fine with desktop screens.

I think we should keep the issue open until the discussion on going.


Replying to adamsilverstein:

Can you give some more specific information about the device/os/screen size you are using? Also, how are you reaching the crop feature, from the media library?

#5 @yahil
8 months ago

@adamsilverstein @melchoyce here is step to reproduce the issue:

  1. Upload Media From Media tab
    • wp-admin -> Dashboard -> Media -> Add New
  1. Select Media [ media will open in popup/model ]
  1. Click on edit media [ Now there is option to crop, rotate left, rotate right, ..... ]

We can crop the image using double click but same things can't do in a mobile device.

If I am wrong, right me.

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

8 months ago

#7 @adamsilverstein
8 months ago

I tested the patch for #30155 here and found I can now enter the cropping mode by clicking on the crop button, then the tool works as expected. Still looking into why the initial drag does nothing. One other note: when entering the edit image mode as you described, essentially from the media details page, the image itself sits below the image details section. When entering image edit mode from the media grid I see something different - the image sits below the image details, and is partially obscured. Probably need some css adjustment here:

Entering from media grid/manager:


Entering from media edit screen:


#8 follow-up: @adamsilverstein
8 months ago

@yahil - can you please give 41242.diff a test to see if this resolves your issue?

#9 @adamsilverstein
8 months ago

in 41242.diff:

  • in initCrop, handle touch events in addition to mouse events
  • in imageSelect jQuery plugin, accept event.which of 0 which is what is provided by touch events

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

8 months ago

#11 in reply to: ↑ 8 @alexgso
4 months ago

I can confirm 41242.diff works for me.

For reference, I'm able to replicate this issue on a Microsoft Surface Laptop which features a touchscreen.

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

3 months ago

#13 @desrosj
3 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

#14 @joemcgill
3 months ago

  • Keywords needs-patch commit added; has-patch needs-testing removed
  • Owner set to adamsilverstein
  • Status changed from reopened to assigned

41242.diff looks good to me. Will need to have the build files generated before/during committing.

#15 @SergeyBiryukov
2 weeks ago

  • Milestone set to 5.0

#16 @adamsilverstein
12 days ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 42818:

Media: Fix image cropping on touch screen devices.

  • In initCrop, handle touch events in addition to mouse events.
  • In imageSelect jQuery plugin, accept event.which of 0 as provided by touch events.

Props yahil, alexgso, joemcgill.
Fixes #41242.

#17 @adamsilverstein
12 days ago

@SergeyBiryukov Saw you tagged this 5.0... do you think this is worth backporting or including in 4.9.5? Before this changing media cropping does not work correctly for touch devices (you need a mouse).

Note: See TracTickets for help on using tickets.