RealEstate Web Design
 


Knowledgebase

Using the image editor incorporated in the online editor


Problem:

How do I edit an image using the image editor incorporated in the online editor?



Solution:

First select the placement of the image within the text by clicking the spot with the left mouse button. Then press the ?Insert/Modify Image? which will open a popup window.
This dialog page contains a Directory bar for browsing your files (complete with the Directory up button and a New folder button), a folder view where you can see the thumbnails of the files and folders and an Upload bar. Using these tools you can upload new files and organize the folders. For more details on uploading photos, see the FAQ question Troubleshooting: uploading a picture.
In the folder view, each image has a Delete button and an Edit button. Press the Edit button to enter the image editor which will open as a popup window containing toolbars and a larger size of the picture.
First, save a preview image by clicking on the OK button (the second button to the right on the top toolbar with a green check sign on it). You can enter a new name for the image by filling in the first field on the top toolbar and also select a file format (the .jpeg format is the smallest in size). Next, use the Quality bar - the Default 85 quality is a very good choice. Click OK to save the new image.
Now begin editing your image.
Select the Crop tool (first button at the top of the left side toolbar). Click and hold the mouse to draw a rectangle area over the image. The selected area will appear clear, while the rest of the picture will be covered in a fine, gray grid. You can move and resize the crop rectangle if it doesn't suit your requirements. Click the OK button to commit. If the cropped image is too big, use the Resize tool (second button at the top of the left side toolbar).
You can resize by dragging the rectangle corners or numerically by entering the new size (width and height) into the input fields (these fields are on the top toolbar).
We recommend that you leave the Constrain proportions option checked. Next to the Width field there's the Lock button (it has two links on it). Click this button if you have the Constrain proportions checked, to set the Height automatically.
When the image size is set, click Ok.
Using the Rotate tool (third button at the top of the left side toolbar), you can flip the image horizontally or vertically (by using the first drop-down menu on the top toolbar), rotate the image 180º, 90ºCW or 90ºCCW (by using the second drop-down menu) and you can also choose intermediate values such as 50º (by filling in the third Angle field). Select the action you want to perform and click Ok to commit.
When using the Measure tool (fourth button at the top of the left side toolbar), click to select the first point of reference, hold and drag to the second point, then release the mouse to select it. Check out the top toolbar to read the dimensions of the photo. Click on the Clear button (the last on the toolbar) to input a new measurement.
The Marker button (fifth button at the top of the left side toolbar) toggles the color of the measuring tool between black and white to make it visible on different backgrounds.
Important: After you finished editing the image, don't forget to click the Save button.
If you close the edit window without saving, the changes you made will be lost.
Once your image is saved, close the image editor's window, click Refresh in the Insert Image window and select the image.
Click Ok to insert this image in the text. The Image Editor will automatically close and the image will be inserted into the Text Editor. To align the image, select it by clicking the left mouse button and dragging the pointer over it, then click the desired justify button. To add a link to this image, click "Insert/Modify" link button with the image selected. For more details, check the tutorial about inserting links. Click Ok to submit the link.
Also see the visual tutorial How to: Use the online editor-Image editing .