Editing Images in Eden

Eden has a powerful on-page image editing feature that allows you to crop and resize images directly on any page that you are editing. Images are not edited within the file library but instead they are edited on any page where they are used.

You can edit an image within one of your page content element zones at any time (even at the same time that you are editing nearby text within the same content element) by right-clicking directly on the image and selecting the Resize/Crop option.

Using the Image Editor Controls

Once you have activated the on-page image editor two small triangular controls will appear together at the bottom right corner of the image you are editing.

The inside triangular control (the one that is closer to the center of the image) is called the Mask Control. This control allows you to resize the dimensions of the image that you will crop. If you only adjust the Mask Control you will crop the original image to a smaller size.

The outer triangular control (the one that is further from the center of the image) is called the Image Control. This controls allows you to resize the original image.

Click and drag the Mask Control or Image Control one at a time to see how they can be used. If you cannot drag a control in one direction (motion is limited by the available space of your original image and the position of the other control) try moving it in other directions until you understand how both controls can be used together. Or, try moving the other control first to create more space.

Once you have moved the Mask Control to shrink the dimensions of the original image you may then click directly on the original image (inside or outside of the mask area) to drag it to the proper position behind the mask window.

Cropping an Image

Cropping an image allows you to select part of an original image that you would like to retain as the image on your page. Cropping an image effectively removes anything outside of the cropped area from the view of your visitors. The image is also made smaller which speeds the loading time of your web page.

If you have not yet edited an image the Mask Control (the inside triangular control) will be positioned at the bottom right corner of that image. If you have already edited an image the Mask Control will appear on the original image where it was left the last time the image was edited.

Right-click directly on the image that you would like to edit and select the Resize/Crop option to being editing the image.

Next, click and drag the Mask Control (the insider triangular control) to change the size of the image you will leave on the page when you are done editing. If you shrink the mask window area you may then click directly on the original image to move it into the proper position behind the mask window. To further resize the mask window area, drag the Mask Control again until it encloses only the part of the image that you want to remain.

Right-click on the image and select the Save resized/cropped image option to save the image. Or if you are also editing the content element that contains the image you can click Save on that element to save the entire element and the image.

After saving your changes to the image you can return to edit the image at any time and your image size and crop position will be preserved. If in the future you decide that you would like to crop a different part of an image that you have already cropped, your original image appears within the image editor so you may easily select a different part of the image to crop.

Resizing an Image

Resizing an image allows you to shink or enlarge the area of the page that the image occupies. Resizing an image to a smaller size reduces the amount of time it takes for the image and the page to load for your online visitors. This is important for many images especially images taken with modern digital cameras as they tend to be way too large for typical web pages.

The Image Control (the outer triangular control) will always be at the bottom right corner of the original image. If you have not yet edited an image the Image Control will be positioned at the bottom right corner of the mask window near the Mask Control. If you have already edited an image the Image Control may appear away from the Mask Control. In this case it will remain where it was left the last time the image was edited.

Right-click directly on the image that you would like to edit and select the Resize/Crop option to being editing the image.

To enlarge an image, click and drag the Image Control away from the center of the image until the original image reaches your desired size. Then click and drag the Mask Control toward the Image Control. This enlarges the original image and increases the mask window area that the image will be cropped to when you save your changes.

To shink an image, click and drag the Mask Control toward the top left corner of the image until the mask window reaches your desired size. Then click and drag the Image Control toward the Image Control. This shrinks the original image and decreases the mask window area that the image will be cropped to when you save your changes.

Right-click on the image and select the Save resized/cropped image option to save the image. Or if you are also editing the content element that contains the image you can click Save on that element to save the entire element and the image.

After saving your changes to the image you can return to edit the image at any time and your image size and crop position will be preserved. If in the future you decide that you would like to increase the size of an image that you previously shrunk, your original image appears within the image editor so the highest quality version of that image will continue to be used.