Blog AboutGalleryPortfolioContact
Kenneth Solberg
Welcome to my blog

Image Cropper datatype for Umbraco

Here’s a new datatype for Umbraco that lets you crop images. Available crops are configured in the datatype prevalue editor. The datatype can be used on both Media and Content nodes and stores data in plain XML format. You can also configure it to create physical crops for you. The cropping UI is based on jCrop from Deep Liquid. I’ve recorded a short screencast that shows the datatype in action.

Example of stored XML:


 
 

XSLT to render a generated image:

Please let me know what you think and if you got ideas for additional features or tweaks.

Download Image Cropper Package

posted
categories
comments

31 comments

A very welcome datatype. Also - love the pic! :P
#2  Hendy
Hi Kenneth, Wow excellent stuff, very useful datatype :) How about being able to define selected crops as mandatory ?
Very nice BUT...can someone tell me who the soundtrack is by, please?
Wow ... Looks almost sexy. Usually I refrain from using that word with anything dev related. But it looks very cool.
The soundtrack is Dubspace by Ralph Myerz and The Jack Herren Band. Norwegian electronica ftw!
Yipee you finally released it Kenny. This is bad ass! Now get it part of the core please so that I can use it in the next minor version of CWS2 ! Warren :)
Nice... Where was that 3 months ago ;-) ... I've created something like that myself, but a bit simpler. The only thing I haven't worked on yet is 'fixed width' but 'variably height' type scenarios. (and transparency)
As usual, an outstanding contribution! Thanks for sharing! cheers, doug.
Looking forward to using it - nice job.
Fantastic! Very useful, we could have used it on our last project... Are you planning on writing more on how to use it? I really did not follow how it worked when used on a doc type. Did you first select the image in a mediapicker built in to the datatype? Or did it crop the image selected in the picker on the other tab? Suggestion for additional feature: the possibility to have the crops created as individual media items in a 'crops'-folder below the original media item. Then the crops would be directly selectable from a mediapicker or the RTE. The cropped sub nodes could be automatically created when saving the original media node, or created manually from the media node. In this scenario it could also be nice to not have to use only preset crop sizes but also custom crops specified directly on the media node. Don't get me wrong, this suggestion was just me dreaming away. The datatype is a fantastic addition to the umbraco world as it is, and it seems to be very well executed.
#11  Tommy Skaue
Testing right now.... Just what I needed!
#12  Tommy Skaue
I can't get this to work. I've added a xslt and a macro to display the image, but the src doesn't get set correctly. It's empty. I think I have set everything up correctly according to the screencast. :-(
@Daniel L, SBBS: You can define as many datatypes using the image cropper rendercontrol as you want. Each one will point to a property with a relative path to an image (eg. upload) on the same node (content, media or member) and expose the full image with crop overlays. @Tommy Skaue: What version of Umbraco are you using?
#14  Tommy Skaue
I'm on umbraco v 4.0.1 (Assembly version: 1.0.3373.718) Glad you made that reply to Daniel. I was wondering the same :-)
Great package, one suggestion: The possibillity of a max viewsize for the datatype would be great. If you have a big pic eg from a digital camera it doesn't scale it to the viewport, I think jCrop has this option Thomas
@Thomas Höhler Thanks, that's a great idea!
#17  Tommy Skaue
If anyone has a working xslt, please send it to me; tommy AT skaue DOT com. Thanks!
The XSLT mentioned in the post works =) Ps. Don't delete a datatype before removing properties using it!
#19  Tommy Skaue
Got this to work (with some crutial help from Kenneth). This is my *working* xslt template. [xsl:template match="/"] [xsl:variable name="imageSrc" select="string($currentPage/data [@alias = 'articlePhotoCrop']//crop [@name = 'articlePhoto']/@url)" /] [xsl:choose] [xsl:when test="$imageSrc!=''"] [img class="articleImage" src="{$imageSrc}" /] [/xsl:when] [xsl:otherwise] [/xsl:otherwise] [/xsl:choose] [/xsl:template] Replace the brackets. Couldn't make this comment without replacing the originals.
#20  Simon Ritchie
Great package - works great on media objects. I am having issues getting it to work on a content node - all goes well & crop overlay saves on the image, however on publish, the full size image is still rendered out. Any thoughts on this?
@Simon Ritchie: This is a bug (doesn't save from 2nd try / postback page) which i just fixed in the upcoming version 0.9 that will sport quality setting, default vertical and horizontal positioning, auto-generate crops for all content items using the datatype and more.
#22  Petr Snobelt
Nice work and screencast.
Incredible work! Well done. It is packages like this that will raise the profile of umbraco to a far wider audience. Thanks for the screencast.
Yes I already modify the web.config and change the datalayer=sqlserver to datalayer=MySQL The problem is just for the dataType and if I remove datalayer=MySQL, connectionString find SQLServer (default value).My line in web.config :
#25  SEO
The ImageCropper Control gives you an interactive interface for getting the dimensions to crop an image.
#26  SEO
The ImageCropper Control gives you an interactive interface for getting the dimensions to crop an image.
#27  Dirk
Clients just go crazy when I demo this stuff. Amazing work and love playing the screencast forever (for the background music)
#28  Pete
Is there any way to just give an option for an unconstrained image size? At the moment unchecking 'Keep aspect' lets the user choose any aspect but the final image is distorted into the target height and width. I've tried using no target height or width but the option doesn't appear in the CMS, and with each set to 0 there is an error on publish.
#29  Iain
Hi Kenneth, brilliant work. However I am with Pete here - my clients just want to select part of the image rather than create one for a specific purpose, so would wish to select part of the image at the same resolution it was selected - rather than upscaled or downscaled. Could this be done?
#30  Emo
Great package - works great on media objects. I am having issues getting it to work on a content node - all goes well & crop overlay saves on the image, however on publish, the full size image is still rendered out. Any thoughts on this? Emo
#31  Nico Lubbers
Awsome package. I see it is a standard feature in umbraco 4.1 (beta) but still have to install it as a package? Nico