Image Editor

Overview

The Image Editor allows images to be resized, cropped, rotated, and zoomed directly within OU Campus. Images can be uploaded and edited all in one operation. The ability to edit an image helps ensure large images are properly resized before being published to the production server. Additionally, images can be saved and renamed.

Access to the Image Editor is dependent on user level. Those who can upload files can use the Image Editor to upload images and edit existing images, but cannot overwrite any existing image with the same file name. Those with overwrite permissions are able to replace existing images. The Image Editor can be accessed using the following methods:

  • Clicking on a linked image name within the Pages list view
  • Clicking Upload and Edit from the Upload modal when uploading an image in the Pages list view
  • When inserting images into an editable region from the Insert/Edit Image filechooser while in the WYSIWYG Editor
  • When inserting images into a mini-WYSIWYG editor from the Insert/Edit Image filechooser while editing or creating a new Web Content Asset
  • When inserting images on a page using the Source Editor

For more information about the Upload and Edit process, visit the Upload and Edit page.

Image Editor Screen

LDP Image Galleries are another way users can add images to a site in the OU Campus system. However, this function is not related to the standard Upload and Edit Image feature and requires that Live Delivery Platform (LDP) be enabled. For information about creating LDP Image Galleries, visit the Image Galleries page.

Image file types support by the Image Editor is browser dependent. The following file types commonly used for web pages can be edited and saved with the Image Editor with the most commonly used browsers:

  • JPG/JPEG
  • PNG
  • GIF
  • BMP

For a complete reference of browser support for image formats, see:

http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

Accessing the Image Editor

The Image Editor can be accessed in three main ways:

  • Click the hyperlinked image name in the Pages list view

    Clicking an Image in Pages List View
  • When uploading an image, click Upload and Edit from the Upload modal

    Upload and Edit Option in Upload Modal

  • When adding an image to an editable region, the source of a page, or in a mini-WYSIWYG Editor and uploading from the Select Image filechooser

    Upload and Edit from a Filechooser

Image Editor Tools

From the Edit Image screen inside the Image Editor, the following functionality is available in the Tools menu:

  • Resize
  • Crop
  • Rotate
  • Zoom
  • Undo
  • Redo

As the image is edited, an estimated file size is shown underneath the image panel. This size will change as the image is resized and cropped.

Resize

The Resize tool includes the ability to specify a new width and height for the image. The original ratio for the image dimensions can be kept intact by selecting the Preserve Ratio checkbox.

Resize Image

Crop

The Crop tool can be used to crop the image, either by selecting a predefined aspect ratio or by determining a custom crop size. When Custom or any of the predefined ratios are selected, a crop box will appear. Users can then adjust the crop for the image by dragging the crop handles located on the edges of the crop box. Clicking the Swap width & height checkbox will swap the dimensions of the crop box width and height (e.g., a crop box with dimensions of 150x300 pixels would swap to 300x150 pixels).

Crop Image

Rotate

The Rotate tool rotates the image 90 degrees in a clockwise direction with each click.

Rotate Image

Zoom

The Zoom tool can be used to manually enter a percentage of the original image size to be displayed in the Edit Image panel for editing. The plus and minus magnifying glass buttons may also be used to increase or decrease the viewing size. Zoom does not alter the size of the image on the staging server; it is only to aid users in the Image Editor.

The Original button reverts the image to the original size.

The Zoom to Fit button resizes the image to fit into the panel for viewing.

Zoom Image

Undo/Redo

The Undo and Redo functionality is available after performing another editing function. Undo reverts the last function performed (one level back). The Redo function reapplies the last function removed by the Undo tool (one level forward).

Final Notes

The edited image must be republished in order to appear correctly on the rendered webpage. This may be initiated with a page publish by selecting the checkbox to publish unpublished dependencies. Or it may be necessary to manually publish the image. If the image does not appear correctly, refresh the browser and/or clear the browser cache as the previous iteration of the image may have been saved by the browser. This action can be found in various places in browsers' settings and for some browsers/platforms, this can be accomplished by pressing CTRL+F5 (Chrome), CTRL+R (Firefox and IE), or CMD+Option+E (Safari). Otherwise the edited image may not appear as expected.

When an image is edited through The Image Editor in OU Campus, it will be recompressed once it is saved. When using lossy file formats such as JPG, this can cause a visible degradation in image quality, especially when an image is edited multiple times in OU Campus. As a best practice, crop or resize images to the exact size needed on the page before importing them into OU Campus. Furthermore, using images saved in a lossless file format (such as PNG) in the Image Editor will avoid losses of quality due to recompression. 

The image size is dependent on two factors: the browser and the amount of memory allocated to the browser by the parent machine. In testing a fairly large image, 13260 x 3955 pixel (27 MB), was used and rendered in 198 ms. Performance of image rendering is dependent upon each individual user's machine and Internet connection. In short, every time a user tries to load an image, large or small, jpeg or any other extension, the image editor relies on the browser to provide the pixel information.

If working with an image that cannot be edited, log out of OU Campus, quit and relaunch the browser. This will free up browser-allocated RAM and may resolve the issue.