Core 3 Image Editor

The Editor is an advanced plug-in for CK Editor, the industry standard HTML editing system that you will now find in Rogue Interactive’s Core3 Content Management System.

Core3 Image Editor will not only allow you to upload images but you can now perform file management operations such as rename files, move files, delete files and create folders. The folder view function allows you to quickly view thumbnail images of the image files on your server. The image editing system has some powerful features from cropping, rotating and scaling to adjusting the brightness, hue and saturation of your images. Please read the user guide below for further information and instructions.

 

Core3 Image Editor Screenshot

User Guide / Instructions

Image Directory

The left hand panel is the Image Directory and shows an exploded view in alphabetical order, all of the files (including Image Type Icon and File Date Information) and folders within your Core3 image directory.

Click on a file name to view the options tab:

The folder bar has three controls:

Image / File Upload

Below the Image Directory List is the image upload facility. Before uploading files, click on a folder name in the Image Directory to set the Image upload path directory. The folder path name will appear in the bottom right hand corner of the Image Upload System. If you do not select a folder, the image will be loaded into the root image directory.

- Click [BROWSE], then select a file from your local hard disk. There is a 3mb limit on file size, so please ensure your files are within this limit. Files of type, JPG, GIF, PNG, PDF and MP3 can be uploaded.

- When you have selected your file, click [UPLOAD] - the progress bar will show your the status of the file upload. If there are any errors, there is a small info window within the upload facility that will show you any relevant system messages.

- To load the new uploaded file into your current HTML page or IMAGE EDITOR, locate it within the Image Directory, click on the file name and select either the first option [ADD TO HTML] or the second option [EDIT IMAGE].

- Or you can speed up the process and by-pass the editor by clicking on the [insert into HTML after uploading] option, which will shut the editor and load the image into the HTML page.

Folder View

To view all the images within a folder as thumbnails, click on the [GRID] icon with the folder bar, the thumbnails will load into the Folder View window.

You can close the folder view by clicking the [CLOSE VIEW] button in the top right hand corner.

Image Editor

Loading an image

You can load an image into the editor from either the Image Directory or Folder View windows.

Cropping an image

Click and drag the black areas that surround your image (above/top, below/bottom, left and right) to move the cropping area. The cropping area is overlaid over the image and is slightly transparent. You can move the image within the cropped area by clicking and dragging the non-cropped area of the image.
The image size and cropped size are displayed above the top right hand corner of the image. You may need to use the [ZOOM] function to see the image / crop area bounds.

Moving an image within the cropped area

You can move the image within the cropped area by clicking and dragging the non-cropped area of the image.

Set crop area to image bounds

If you have moved, rotated or scaled the image, you can set the cropping area to the imagebounds by clicking on the [CROP] icon within the top navigation.

Zooming

To zoom in or out you can select the [ZOOM] toolbar from the top navigation. Click on either 25%, 50%, 100%, 150% or 200% size icons to change the zoom level.

Scale

You can scale your image proportionally or by width / height independently. Select the [SCALE] toolbar from the top navigation and use the sliders to control the scale, click on the [LOCK] icon to lock or unlock the aspect ratio.

Rotate

You can rotate and image around its centre point by selecting the [ROTATE] toolbar from the top navigation and use the slider to control the rotation amount.

Brightness

The brightness of an image can be controlled either by separate channels (R,G or B) or in full (all channels). Select the [BRIGHTNESS] toolbar from top navigation. The channels can be locked or used independently. Click on the [LOCK] icon to lock or unlock their control. Use the sliders to change the brightness of your image.

Contrast

The contrast of an image can be controlled by selecting the [CONTRAST] toolbar from the top navigation. Use the slider to change the contrast of your image.
Note: Contrast will overdrive all other image adjustment settings.

Saturation

The colour saturation of an image can be controlled by selecting the [SATURATION] toolbar from the top navigation. Use the slider to change the colour saturation of your image .

Hue

The hue of an image can be controlled by selecting the [HUE] toolbar from the top navigation. Use the slider to change the hue position of your image. A colour reference slider is also displayed to help indicate which colours will change to their new colour when adjusting the hue.

Background - Colour overlay and underlay

The colour overlay and underlay feature allows you to place a colour tint above or below the image layer. Select the [BACKGROUND] toolbar from the top navigation. You can select a background colour from the colour selector marked [BACKGROUND] and then adjust the opacity of the image to allow the background colour to be visible underneath the image. You can select an overlay colour from the colour selector marked [OVERLAY] and then adjust the overlay opacity to decrease or increase the colour overlay strength.

Save and Replace

Selecting [SAVE AND REPLACE] from the top navigation allows you to overwrite the current file with any image adjustments you have made. You can also select the JPG quality from 0 (min) to 100 (max).

Save New File

Selecting [SAVE NEW FILE] from the top navigation allows you to save your image with any image adjustments you have made as a new file. A prompt will appear asking for a file name (.jpg) and a folder location to save the image file to. You can also select the JPG quality from 0 (min) to 100 (max).