AgileSite 7.0 Context Help

Image editor

Image editor

Previous topic Next topic Mail us feedback on this topic!  

Image editor

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

The Image editor is capable of performing the following actions:

 

Resize

Rotation

Convert

Crop

Color

 

You can also view the properties of the image:

 

Properties

 

The changes you have made to the image can be redone, undone or saved.

 

Resize

 

The Resize action lets you change the size of the image. The image is either enlarged or reduced to the size you specify. You may specify either a relative percentage to resize the image by, or an absolute pixel size. If the Maintain aspect ratio option is checked, then typing a new Width value will maintain a proportional Height value, and vice versa.

 

By percentage - resizes the image to the entered percentage of side size.

By absolute size - resizes the image to the size specified in the Width and Height fields.

Width - the width size of the image; in pixels.

Height - the height size of the image; in pixels.

Maintain aspect ratio - if checked, proportional values of the image dimensions will be maintained.

 

Rotation

 

The Rotation action commands enable you to rotate the image by 90 degrees (in either the clockwise or counter-clockwise directions) and to flip the image, both horizontally and vertically.

 

Rotate 90° left - rotates the image to the left by 90 degrees.

Rotate 90° right - rotates the image to the right by 90 degrees.

Flip horizontally - flips the image horizontally.

Flip vertically - flips the image vertically.

 

Convert

 

The Convert action enables you to transform the image file from one format to another. The From field of the action dialog tab is always filled in automatically according to the current format of the edited image. Please note that for the .jpeg image file type, you can also define image quality by entering the image quality percentage into the Quality field.

 

From - the source format of the image.

To - the target format of the image; .bmp, .gif, .png and .jpg image formats are supported.

Quality - the quality of compression; applicable only for .jpg conversion.

 

Crop

 

The Crop action enables you to remove portions of the image to create focus or strengthen the composition. Image size is reduced without changing image resolution, so that the edited image is not distorted. Using AgileSite Image editor, you can crop images either manually by entering the coordinates of the upper-left point of the crop area rectangle and its width and height or you can move the mouse over the area of focus. The crop area rectangle can be resized in any direction unless the Lock aspect ratio option is checked. If checked, proportions of the currently selected crop area rectangle are maintained while resizing.

 

X - the X coordinate of the upper-left point of the crop area rectangle.

Y - the Y coordinate of the upper-left point of the crop area rectangle.

Width - the width of the crop area rectangle; in pixels.

Height - the height of the crop area rectangle; in pixels.

Lock aspect ratio - if checked, the crop area rectangle will keep its current proportions while resizing it in any direction.

The same functionality can be achieved by holding the SHIFT key while moving the mouse. If the Lock aspect ratio option is checked while performing this operation, the result is inverse.

Pressing the CTRL key will result in returning the square of the currently selected rectangle area.

 

Please note that the crop area rectangle can be moved within the crop area by moving the mouse inside the rectangle.

 

Click OK to confirm the immediate change or click Reset or anywhere within the edited image outside the crop area rectangle to clear all the Crop action input fields.

 

Color

 

The Color action lets you easily convert the image from color to grayscale.

 

Convert to grayscale - clicking this link results in converting the image from color to grayscale.

 

Properties

 

The Properties tab displays important information about the image such as its file name, title, description, extension, size, width and height. The File name, Title and Description fields are editable, enabling you to change the respective properties of the image.

 

File name - the file name of the image.

Title - the title of the image; image metadata that can be used e.g. in transformations.

Description - the description of the image; image metadata that can be used e.g. in transformations.

Extension - the file type extension of the image.

Size - the size of the image; in kB.

Width - the width of the image; in pixels.

Height - the height of the image; in pixels.

 

Undo and Redo

 

The Undo and Redo actions allow you to undo and redo up to 1000 changes made while editing the image. After each partial change, a temporary version of the image is created and stored in the system. By clicking the Undo and Redo buttons, you can view the stored versions of the image.

 

Save changes

 

By clicking the Save changes button, the original image is replaced by the currently edited version of the image.

 

 

 

Please note

 

If you decide to leave the dialog window by clicking the Close button, a message window will pop up informing you that all changes you have made to the image will be lost.

 

 

To learn more about image editing in AgileSite , please refer to Developer's Guide -> Content management -> File management -> Image editor.