: The Image Plugin

The Image Plugin

The Image Plugin allows for the basic manipulation of images right within the content of an editable. It has support for:

insertion,
resizing by dragging or entering values, both with and without fixed aspect ratio,
cropping,
dragging the image around,
changing the title, src and alt attributes,
changing the image padding,
resetting the image to it’s initial state after changing some of its properties.

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. 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);
	}
};

2 Notes

2.1 Ignoring images

To make the image plugin ignore image elements that are contained in an editable but not part of the content, for example UI elements that enhance the editor’s interactivity, or other elements that are transient in nature, mark them with the class ‘aloha-ui’.

2.2 Components