WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 4 months ago

#41242 reopened defect (bug)

Image crop not working in mobile screen.

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

Description

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 4 months ago.

Download all attachments as: .zip

Change History (11)

#1 follow-up: @adamsilverstein
4 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
4 months ago

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

Duplicate of #30634.

#3 @adamsilverstein
4 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
4 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.

Thanks.

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
4 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.
Thanks.

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


4 months ago

#7 @adamsilverstein
4 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:

https://cl.ly/0z3n2e2j3y1x/developwordpress.localhost-wp-admin-upload.php(iPhone%206).png


Entering from media edit screen:

https://d3vv6lp55qjaqc.cloudfront.net/items/423i143c1i0h08191z2j/developwordpress.localhost-wp-admin-post.php-post=62&action=edit(iPhone%206).png

#8 @adamsilverstein
4 months ago

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

#9 @adamsilverstein
4 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.


4 months ago

Note: See TracTickets for help on using tickets.