Image context menu

The plug-in image context menu allows the following operations:

• add image alternative text
• add image caption
• add image link
• align image to left, center or right
• apply pre-defined image style using CSS classes
• change image display mode
• change image size
• edit image using built-in image editor
• replace image using an image from end-user desktop, image referenced by URL or from the image browser
• remove image

The table below list image context menu buttons definable using option imageEditButtons.

Label	Button name	Description
Replace image	imageReplace	Displays button to replace an image
Align image	imageAlign	Displays button to align an image
Image caption	imageCaption	Displays button to adding an image caption text
Remove image	imageRemove	Displays button removing an image from document
Image link	imageLink	Displays button adding an image link
	linkOpen	Displays button opening image link when image link is defined
	linkEdit	Displays button opening popup updating an image link when image link is defined
	linkRemove	Displays button removing image link when image link is defined
Display mode	imageDisplay	Displays button chaning image display mode (inline or break text)
Image style	imageStyle	Displays button with availabe image styles
Image alternative text	imageAlt	Displays button defining alternative text for an image when image can't be loaded
Image Size	imageSize	Displays button to set fixed size of an image
In-Document Image Editing	imageTUI	Displays button opening In-document Image Editor

separators

The context menu uses | and - to create vertical and horizontal separators.

Options

imageEditButtons

The image context menu can be configured to display only specified buttons using the plug-in attribute Initialization JavaScript Code and Froala option imageEditButtons.

The plug-in default context menu definition is presented below.

function( pOptions ) {
  pOptions.imageEditButtons = [
    'imageReplace', 'imageAlign', 'imageCaption', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 
    'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize', 'imageTUI'
  ];

  return pOptions;
}

imageStyles

The option imageStyles defines aplicable CSS image styles to the currently focused image. The value is JSON object describing available styles where key is CSS class name, and the value is label displayed in image style dropdown. If more than one style can be applied to an image, the option imageMultipleStyles must be set to true. Otherwise, only one style can be applied to an image.

Notice about image styles

Image styles are only visible when a document is displayed along with a custom CSS rules. Using In-Document Image Editor allows modyfing the image iteself.

Initialization JavaScript Code

function( pOptions ){
  pOptions.imageMultipleStyles = true;
  pOptions.imageStyles = {
    'custom-flip-x': 'Flip Horizontal',
    'custom-flip-y': 'Flip Vertical'
  };
    
  return pOptions;
}

CSS

.custom-flip-x {
  transform: scaleX(-1);
}

.custom-flip-y {
  transform: scaleY(-1);
}

.custom-flip-x.custom-flip-y {
  transform: scaleY(-1) scaleX(-1);
}

Preview

For example, a new image styles Flip Horizontal and Flip Vertical can be defined using a simple CSS rules and a page item attribute Initialization JavaScript Code.

imageMultipleStyles

The option imageMultipleStyles allows multiple image styles to be selected at a time. See option imageStyles.

Initialization JavaScript Code

function( pOptions ){
  pOptions.imageMultipleStyles = true;
    
  return pOptions;
}

Example layouts

Inline

The example presents context menu organised as inline menu allowing only to align, remove and add caption to an image.

Initialization JavaScript Code

function( pOptions ){
  pOptions.imageEditButtons = ['imageAlign', 'imageRemove', 'imageCaption']
  return pOptions;
}

Preview

Grid

The example presents context menu organised in grid layout using horizontal - and vertical | separators allowing end-user to add caption, resize, align and remove an image.

Initialization JavaScript Code

function( pOptions ){
  pOptions.imageEditButtons = [
    'imageCaption', '|', 'imageSize', '-', 
    'imageAlign', '|', 'imageRemove'
  ];
    
  return pOptions;
}

Preview