Besides allowing to upload images to their server, one of the main problems that users have with the images is the size of the pictures. Even for seasoned users, sometimes it's hard to calculate how to correctly crop a part of the image and then resize it to the final desired dimensions.
Using the features provided by the SimpleUploads plugin for CKEditor, you can now make this a very simple task so that they upload to the server the images exactly as desired, without any extra images laying around, and without worries that if the image is automatically cropped, the heads will be cut off or any strange thing like that.
The process is as simple as you can expect, once you have used it you'll never want to go back:
- First add the image to the editor, usually the simplest way for the users is to just drop them from another window with the local file system (Explorer, Finder, etc...), but using the toolbar button to launch the file picker works as well.
- Then a dialog launches showing the selected picture and the user is asked to select which preset sizes (that you configure in CKEditor) he/she wants to use.
- Upon clicking on one of them, a selection appears over the image, and that selection can be resized and moved to focus on the interesting parts of the image.
- Now the user can just click OK on the dialog and the image will be saved that way
- Otherwise, if he clicks Crop then the options will ask which image quality should be used, and changing them modifies the preview as well as the size that it's shown that will be used for the new image.
- Clicking OK will work like in step 4, the image is uploaded to the server and inserted into the content.
But there's even more:
If the image is already on the server, a new context menu option is added to show the same crop&resize dialog, so the user can opt to use existing images on the server and then adjust them when a thumbnail is required for example.
To get those features, check the demo for the image crop and resize plugin for CKEditor.
No comments:
Post a Comment