Hi guys, I'm pretty new to Umbraco, I use since few months but I think I've learned enough to built my first site. The home page of my site contains an image carousel with a big version (980x280) and a thumbnail for each images that scroll above. So, I would let my users to upload, resize and create those thumbnail and for these three steps I thought about three phases: upload, resize by width (980) and then creare a thumbnail. I would creare a DocumentType with three properites:
I've two question: - since the Image has 980px as width, in order to create a thumbnail I would resize it again down to 200px. Can I do this automatically before crop it? - how save the resized & cropped image into a custom folder under /media? such "/media/cover_images/imgCropped.jpg"
Assuming you're using Umbraco 7 (there are ways in Umbraco 6 but it's not so easy) you shouldn't need to create and save the individual crops. You can create a new datatype in the developer section using 'Image cropper' as the property editor. Then on that datatype you can create the crop dimensions required for all the different usages of your images. Then you can go in to the settings section and change the default image upload datatype to your new Image Cropper one. With this in place any image you upload to the media section of the website will automatically be available in the crop sizes defined on your datatype. All of the resizing and cropping happens automatically around a focus point which your editors can change. You just need to call a particular razor helper method (detailed in the documentation) to render these crops into your templates.
The editor will be able to tweak/change the crops by editing the image in the media section and simply choosing a new focal point.
It would be pretty time-consuming to detail this whole process in words, but I'd say you should watch Jeavon Leopold's recent uHangout episode where he runs through the imageCropper and a bunch of useful stuff you can do with it.
Dan thanks for reply, your tip has been very useful and I hope they will be easy to implement also on version 6.2.1 which I'm actually using. Basically it's all around a new dataType. Going to test it...
I'm pretty sure the new imagecropper datatype with the focal point stuff was only introduced in v7. However, it was based on an old package called CropUp which works with v6. So I think you'll need to install CropUp and use that if you need the neat user interface for letting editors pick a focal point and creating auto-crops around that, rather than any built-in cropping datatypes.
Sorry if I've confused things by assuming you're on v7. The CropUp package is still great though and does much the same thing, and if you have any issues/questions with it just post back here. :)
Upload, resize and crop an image
Hi guys,
I'm pretty new to Umbraco, I use since few months but I think I've learned enough to built my first site. The home page of my site contains an image carousel with a big version (980x280) and a thumbnail for each images that scroll above.
So, I would let my users to upload, resize and create those thumbnail and for these three steps I thought about three phases: upload, resize by width (980) and then creare a thumbnail.
I would creare a DocumentType with three properites:
- Image (type Upload)
- ImageResized (type ImageReizer)
- ImageCropped (type ImageCrop)
I've two question:
- since the Image has 980px as width, in order to create a thumbnail I would resize it again down to 200px. Can I do this automatically before crop it?
- how save the resized & cropped image into a custom folder under /media? such "/media/cover_images/imgCropped.jpg"
thanks a lot
alberto
Hi Alberto,
Assuming you're using Umbraco 7 (there are ways in Umbraco 6 but it's not so easy) you shouldn't need to create and save the individual crops. You can create a new datatype in the developer section using 'Image cropper' as the property editor. Then on that datatype you can create the crop dimensions required for all the different usages of your images. Then you can go in to the settings section and change the default image upload datatype to your new Image Cropper one. With this in place any image you upload to the media section of the website will automatically be available in the crop sizes defined on your datatype. All of the resizing and cropping happens automatically around a focus point which your editors can change. You just need to call a particular razor helper method (detailed in the documentation) to render these crops into your templates.
The editor will be able to tweak/change the crops by editing the image in the media section and simply choosing a new focal point.
It would be pretty time-consuming to detail this whole process in words, but I'd say you should watch Jeavon Leopold's recent uHangout episode where he runs through the imageCropper and a bunch of useful stuff you can do with it.
Hope this helps :)
Dan thanks for reply,
your tip has been very useful and I hope they will be easy to implement also on version 6.2.1 which I'm actually using. Basically it's all around a new dataType. Going to test it...
Hi,
I'm pretty sure the new imagecropper datatype with the focal point stuff was only introduced in v7. However, it was based on an old package called CropUp which works with v6. So I think you'll need to install CropUp and use that if you need the neat user interface for letting editors pick a focal point and creating auto-crops around that, rather than any built-in cropping datatypes.
Sorry if I've confused things by assuming you're on v7. The CropUp package is still great though and does much the same thing, and if you have any issues/questions with it just post back here. :)
is working on a reply...