U4-4052 - We need an image cropper in the v7 core

Created by Sebastiaan Janssen 14 Jan 2014, 15:36:32 Updated by Asbjørn Riis-Knudsen 14 Mar 2014, 23:10:41

Relates to: U4-3321

Relates to: U4-3713

Relates to: U4-4446

Relates to: U4-4447


Jeroen Breuer 22 Jan 2014, 08:08:30

Is there any extra info about this cropper somewhere? Maybe a list with features so we can give feedback. I heard it's going to be CropUp based. Does that mean it will work with a single focus point and what about responsive images?

Per Ploug 27 Jan 2014, 09:34:49

We're working on it, current prototype is based on a single focus point, with the possibility to override specific crops - so currently work is focused on rewriting the UI for cropUp in V7 and provide the somewhat same libraries for razor + js frontend work

Douglas Robar 27 Jan 2014, 15:29:37

FWIW, Jeavon has created an alpha version of a cropper that is agnostic about the resizing engine used. I think that's an important feature rather than embedding a specific tool as the old cropUp did. http://our.umbraco.org//projects/backoffice-extensions/v7-image-cropper

Damian Green 27 Jan 2014, 15:59:38

Ooo! Thanks for the heads up Douglas. Will definitely check that out. Ive ported a site to v7 and now need a cropper. :)

John Walker 28 Jan 2014, 13:15:50

Just cam across what looks like a really nice js plugin for image cropping that also supports touch, just thought I'd mention it here as may be useful for this feature: http://www.joustmultimedia.com/blog/post/image_cutter

Jeroen Breuer 13 Feb 2014, 16:15:55

I just saw this YouTube video about the v7.1 Image Cropper: http://www.youtube.com/watch?v=6Aq4FEpT7pI. Currently it looks like a mix of CropUp and the old Image Cropper.

I like the single focus point and the previews at the bottom, but does this mean you need to predefine the crops in datatype again? This was a big disadvantage with the old Image Cropper because I would like to define the crops in the code. If I have a news item crop I don't need to see the crop for a slider which does seem to happen in the YouTube video. You could solve that with custom media types, but the multiple file uploader in Umbraco doesn't support that. This is how I used custom media types in v4: http://stream.umbraco.org/4959050/6425725/72bf94f034da458108e57cad46db3eff/video_hd/package-heaven-damp-video.mp4.

So the crop previews are nice, but I hope they are optional and you could also just have a single focus point like CropUp and than define the crops in Razor and like Douglas suggested choose a resizing engine.

Tim Geyssens 13 Feb 2014, 16:49:04

Also have some ideas:

So crops would be child nodes that have an attribute isCrop, when fetching children from a media item they are ignored if you want the crops you can do mediaItem.Crops("landscape") or mediaItem.Crops.landscape , crops are also regular media items so easy to use in rte and media picker and in other places where media might be used (third party stuff)

Only difference is that crops aren't shown in the tree but on the parent media item

So for media picker and rte, you would just need a show crops toggle option int he media dialog (to make it possible for editors to pick the crop instead of the orig image)

And would be nice if you could place the media/image picker in a cropper mode, say you have a team photo and on a team page you need the head of each person.. crop from inside the dialog, maybe possible to set crop dimensions on media picker

So say you have this pick and want to crop out the heads for a team page, http://www.nicta.com.au/__data/assets/image/0007/15289/SAIL_Team_14Feb08_large.jpg currently you would need to add it 6 times then select 1 person per upload of the file. Making it possible to crop from inside the picker would make this smoother

Maybe also a free cropping mode so that it's not restricted to the predefined dimensions but editors can just crop and use

Jeroen Breuer 14 Feb 2014, 19:55:09

Great ideas Tim!

I just watched todays uHangout (http://www.youtube.com/watch?v=1rEVtjnDDyg) and got a lot more info about the Image Cropper. The Razor code shows the following: image.Crop("landscape") You could also do that with CropUp, but you could also choose the width and height. I really hope something like this will also be possible: image.Crop(width: 400, height: 100) The Image Cropper prevalue editor is still in development so I really hope that defining the crops becomes optional.

Asbjørn Riis-Knudsen 25 Feb 2014, 15:02:32

Yes, Tim - those ideas sound great! Especially as they would allow you to use crops in the RTE.

Christopher Brandsdal 04 Mar 2014, 23:21:20

I was touching my screen at the wrong place and time, and accidently deleted the link to the issue

U4-3713: Image Cropper and Media Picker for v7 improvements

I am not sure how to link it back again, so i need some help doing that. I'm so sorry. Never scrolling like crazy using the fingers...

Robert Foster 14 Mar 2014, 02:20:33

Just trying out the new Image Cropper with U7.1 beta, and it looks like it's a drop in replacement for the Upload data type (it includes a file upload area in the control, which I wasn't expecting) - I've just changed over the data type for the Image type and it's working as expected; however when I save, the other image attributes - width, height, size, type etc. are no longer populated.

Am I just using this wrong? I note that you are planning a blog post covering using this data type, but any assistance now would be appreciated :)

Robert Foster 14 Mar 2014, 04:09:08

Just done some more testing - the Scaling functionality isn't working as expected in Internet Explorer 11 but does work in Firefox.

Still not getting the other Image Attributes when saving though.

If you want me to open a new Issue I can...

Asbjørn Riis-Knudsen 14 Mar 2014, 23:06:45

@Robert I can confirm both these issues.

I have created two new issues: U4-4447 and U4-4446 to track these issues.

Priority: Normal

Type: Feature (request)

State: Fixed

Assignee: Per Ploug

Difficulty: Normal


Backwards Compatible: True

Fix Submitted:

Affected versions: 7.0.0, 7.0.1, 7.0.2

Due in version: 7.1.0


Story Points: