Jump to main content

Editing Images

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 edited image must be republished in order to appear correctly on the rendered webpage. 

Please note: we recommend resizing images in Photoshop rather than OU Campus to allow for optimization for the web.

Accessing Image Editor

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 file chooser while in the WYSIWYG Editor

Editing Functionality

Editing functionality available includes:

  • Resize: See the Web Style Guide for appropriate image sizes; remember to hit the resize button after editing
  • Crop: Drag the image handles to set the crop area, remember to hit the Apply Crop button after editing
  • Rotate 
  • Zoom 
  • Undo/Redo

Resize an Image

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 tool

Cropping an Image 

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. You 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 editing tool

Rotate an Image

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

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).

Tip: As a best practice, crop or resize images outside of OU Campus to the exact size needed on the page before uploading to your image folder.
Tip: The Web Style Guide includes appropriate image sizes for rows and columns.