Hi,

I have the crop initialize when an image is uploaded (which is totally awesome, and a great user experience - thank you!), but the crop tool doesn't work on a touch device (because there's not enough area to grab the resize handlers).

Since most mobile devices come with native cropping tools, it's fine to disable the automatic crop for touch screens - so I'm not looking for a mobile version of this module.

I'd like to make a request to override the defaults on touch devices - these can be detected through Modernizr without difficulty, and it makes a cleaner solution until we have alternative mobile options (I'd like to create a 'mobile user' and set permissions there).

If this will take a while - Is there a way we can make the module accessible to the theme so I can override it with javascript for certain conditions?

Thanks! Much appreciated!

Comments

Kate Hopkins’s picture

Kate Hopkins commented
Title: Mobile: prevent crop on small devices » Mobile: prevent crop on touch devices

  • Matthijs committed 7b23aa3 on 7.x-1.x 
    Issue #2313353: Added a screen width check to disable "crop after upload...
matthijs’s picture

matthijs
Primary language Dutch
commented
Status: Active » Fixed

I've hard coded a check to disable this feature for screens smaller then 768px, because I think you have a fair point that this isn't useful on mobile devices.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

cthshabel’s picture

cthshabel commented

The most recent version of imgareaselect.js supports mobile. Can we integrate this into manual crop? I already added the new version and it "kind of" works. Seems like some small changes need made to match everything up.

http://odyniec.net/blog/category/jquery/

I think this would be a very nice feature.

yaelsho’s picture

yaelsho commented

+1
It could be very nice indeed to have the manual crop feature for mobile devices

yaelsho’s picture

yaelsho commented

I tried to install the new vesion of imgareaselect.js that should work in touch devices:
https://github.com/odyniec/imgareaselect/tree/0fa8ffa232b1f5f5c4497acd0d...
And have disabled the screen size check from manualcrop.js file: "if (screen.width > 767) {"

The manual crop post those changes was still working in desktop. In mobile devices it seemed like the imgareaselect was working good, but I couldn't save the changes, the manualcrop buttons were not responding to touch events.

Any idea how to make thos buttons to respond to touch events?
(changeing the button event from onmouseclick= to ontouchstart= didn't work as well.

sgurlt’s picture

sgurlt commented
Status: Closed (fixed) » Needs work

Reopen, for me it also would be very interesting to see this working on mobile devices.

ConradFlashback’s picture

ConradFlashback commented

+1

kporras07’s picture

kporras07 commented

As an update on this issue, I just updated module version to last published, updated both js libraries to last published and it works ok :D

jatinkumar1989’s picture

jatinkumar1989 commented

Hi @kporras07

can you pls mention which version you used for run successfully
(i am having a issue as manualcrop is not working on mobile devices(I phone 6)

i am using below version.
manual crop version: 7.x.1.6
imgAreaSelect : 0.9.11-rc.1
imagesLoaded : 2.1.2

Thanks
-Jatin

kporras07’s picture

kporras07 commented

Hello @mail2jatingarg,

Sure:
- Manualcrop: 7.x-1.7
- imgAreaSelect: 1.0.0-rc.1
- imagesLoaded: v4.1.4

Hope it helps,

m_dimitris’s picture

m_dimitris commented

@kporras07

I have the same version as yours the image opensbut I receive the following errors in my console :

VM18789:7 Uncaught TypeError: h.Deferred is not a constructor
    at new o (<anonymous>:7:1692)
    at $.fn.init.h.fn.imagesLoaded (<anonymous>:7:5397)
    at Object.ManualCrop.isLoaded (<anonymous>:876:12)
    at <anonymous>:316:24
    at Object.ManualCrop.isLoaded (<anonymous>:873:5)
    at Object.ManualCrop.showCroptool (<anonymous>:98:14)
    at HTMLInputElement.onmousedown (ol-locator-location:1)
o @ VM18789:7
h.fn.imagesLoaded @ VM18789:7
ManualCrop.isLoaded @ VM18787:876
(anonymous) @ VM18787:316
ManualCrop.isLoaded @ VM18787:873
ManualCrop.showCroptool @ VM18787:98
onmousedown @ ol-locator-location:1
VM18788:1 Uncaught TypeError: pt.add(...).off is not a function
    at T (<anonymous>:1:6606)
    at HTMLImageElement.O (<anonymous>:1:5334)
    at HTMLImageElement.<anonymous> (jquery.js?v=1.4.4:74)
    at HTMLImageElement.handle (jquery.js?v=1.4.4:64)
    at HTMLImageElement.o (jquery.js?v=1.4.4:57)

Any idea why this is happening?

Thanks in advance

m_dimitris’s picture

m_dimitris commented

ok my mistake...I had to update jquery to a much newer version...