How to edit Website Images

Navigate to the Image Editor

1. Login to TheWebConsole

2. From the left side menu click Image and File Manager

 
 
Edit The Image

1. You may wish to edit the image, for example, crop, rotate or resize the image. From the Image and File Manager, select the image you wish to edit and select the edit image button. This will open the edit options allowing you to edit the image, these will appear in the left of the image, the edits that can be made are listed below:

• Adjust: This can be done by clicking the adjust button, this is the far left button in the edit options, this button will also allow you to rotate, crop or flip the image.

• Finetune: This will allow you to adjust the image brightness, Contrast, HSV, Blur and Warmth of the image.

• Filters: Here you will find a number of filter options to apply to the image.

• Watermark: Here you will be able to add either a text or image watermark overlay on the image.

• Draw: Here You will have options to draw onto the image.

• Resize: Here you will have the options to resize the image either by a percentage or by entering in the size you want the image to be.

• Reset: This will reset all the changes you made to the image. You will be prompted for confirmation when clicking the reset button.

• Undo/Redo: Here you can undo and redo the changes you have made to the image.

• Save: Once you have made your edits you will need to click the save button to apply the change, the save button is the floppy disk icon.

• Cancel: The button on the far right is the exit editor button, this will close the image editor, remember to save changes prior.

2. Once you have applied the style and effects and done any required edits, click the “Save” button at the top right hand side to save the changes to the image.

Note: Any edits to the image will apply a compression filter over the image, saving the file as a separate image within your Image and File Manager.

With the release of the Image Editor tool you can now edit the images used on your websites pages directly through the editor whilst managing your pages.

To Edit Images In Your Website:

1. Hover your mouse over an image once its added into a content page. This will bring up the standard options "Move", "Edit Property", "Copy", "Delete" and now a new option "Edit Image".
2. Click the "Edit Image" button, this will load the new Image Editor and display the parent editing options "Crop", "Re-size", "Save" and "Exit"
3. Once all edits have been applied and there's no further editing required click the "Save" button, this will save all the applied updates and create a new image for use on your page, note that the image will also save an updated version within the "Image and File Manager" for use on other pages.

To Crop Images In Your Website:

1. Select the "Crop" image option, this will bring up the cropping tools listed below:
   
   - Crop Shape: Allows the image to be cropped as a square or Circle
   - Lock Aspect Ratio: locks the aspect ratio to 16:9, 4:3, 3:4 or 1:1
   - Zoom In: Zooms into the image
   - Zoom Out: Zooms out of the image
   - Move: Allows for the cropped area to be moved to desired areas of the image
   - Flip Horizontally: Flips the image on the horizontal aspect
   - Flip Vertically: Flips the image on the vertical aspect
   - Rotate Left: Rotates the image 45d to the left
   - Rotate Right: Rotates the image 45d to the right
   - Reset: Removes all updates that have not yet been Applied
   - Apply: Applies the edits made through the Crop options
   - Exit Crop: Exits the Crop options, regardless of applying updates


2. Once you have updated the Crop options to match your desired output make sure to press "Apply"
3. Once all edits have been applied and there's no further editing required click the "Save" button

To Re-size Images In Your Website:

1. Select the "Re-size" image option, this will bring up the re-size tools.
2. From here you can either manually input a desired Width and  Height or alternatively maneuver the display box by dragging the blue square on the bottom right of the image.
3. Once you have updated the Re-size options to match your desired output make sure to press "Apply".
4. Once all edits have been applied and there's no further editing required click the "Save" button.