The Image Plugin
The Image Plugin will allow for basic image manipulation right within your content:
- resize (by dragging and entering values)
- resizing with fixed aspect ratio
- resetting the image to it’s initial state
- Image cropping
- Insert a Image
- Support for dragging the image around
- Support for changing the title, src and alt attributes
- Support for resizing the image
- Support for changing the image padding
You need a server side script like ImageMagick which will handle actual cropping for you.
1 Enable the image browser button
If you have configured or integrated a repository containing images, you can enable an image browser button in the floating menu image scope. I will help user to choose an image picked from the repository. To enable this feature, just add ‘extra/imagebrowser’ to the plugins list to be loaded.
1.1 Configuration settings
Activate the image plugin per editable:
Aloha.settings.plugins.image: { config: [ 'img' ], // enable the plugin editables: { '#my-editable': [ ] // disable the plugin for the editable with ID my-editable } }
Instead of [ 'img' ] you can also use an object of with settings available for the image plugin.
All available configuration settings (not all are per individual editable):
Aloha.plugins.image = { 'maxWidth': 1600, 'minWidth': 3, 'maxHeight': 1200, 'minHeight': 3, // This setting will correct manually values that are out of bounds 'autoCorrectManualInput': true, // This setting will define a fixed aspect ratio for all resize actions 'fixedAspectRatio' : false, // When enabled this setting will order the plugin to automatically resize images to given bounds 'autoResize': false, //Image manipulation options - ONLY in default config section ui: { oneTab : false, //Place all ui components within one tab insert : true, reset : true, aspectRatioToggle: true, // Toggle button for the aspect ratio align : true, // Menu elements to show/hide in menu resize : true, // Resize buttons meta : true, margin : true, crop : true, resizable : true, // Resizable ui-drag image handles : 'ne, se, sw, nw' }, /** * Crop callback is triggered after the user clicked accept to accept his crop * @param image jquery image object reference * @param props cropping properties */ onCropped: function ($image, props) { Aloha.Log.info('Default onCropped invoked', $image, props); }, /** * Reset callback is triggered before the internal reset procedure is applied * if this function returns true, then the reset has been handled by the callback * which means that no other reset will be applied * if false is returned the internal reset procedure will be applied * @param image jquery image object reference * @return true if a reset has been applied, false otherwise */ onReset: function ($image) { Aloha.Log.info('Default onReset invoked', $image); return false; }, /** * Example callback method which gets called while the resize process is beeing executed. */ onResize: function ($image) { Aloha.Log.info('Default onResize invoked', $image); }, /** * Resize callback is triggered after the internal resize procedure is applied. */ onResized: function ($image) { Aloha.Log.info('Default onResized invoked', $image); } };
1.2 Components
- insertimage – a button that allows you to insert an image