BASICS

ADMINISTRATION

DEVELOPMENT

SUPER ADMIN

  LAST UPDATED
1/17/2013

Using Image Editor

Introduction

Image Editor allows images to be resized, cropped, and rotated directly in OU Campus. Images can be uploaded and edited all in one operation. This helps ensure large images are properly resized before they get to the web server. Access to the new Image Editor is level dependent. Those who can upload files (Level 6 and above) can use the Image Editor to upload images and edit existing images, but cannot overwrite any existing image with the same file name. Those who can delete files (Level 8 and above) can edit and overwrite any existing image.

Note: This section includes information about using the Image Editor for uploading and editing images, inserting images and image maps with the Image Editor, viewing thumbnails of images with the Image Editor, and inserting videos via the WYSIWYG Editor. For information pertaining for creating image galleries with live delivery platform assets, please see:

Image Galleries

The Image Editor can be used in two parts of the system. While viewing a list of files on the production server by clicking the Content tab, then clicking on the Production view, or while inserting images on a web page using the WYSIWYG editor.

NOTE: The Image Editor minimally requires Java 5 installed to be able to use it.

Image Editor
No matter how the Image Editor is accessed, a new floating window opens giving with the ability to zoom, resize, crop, and rotate an image.

Image File Types

JPG, JPEG and PNG images can be edited and saved using the Image Editor. GIF images can also be edited, but must be saved as JPG, JPEG or PNG files. Simply changing the extension of any image file during save will properly convert the file to a web-optimized version of the chosen file type. The chart below illustrates the files that can be edited and saved using the Image Editor:

 

Original Image Type Possible Saved Image Types
.JPG .JPG or .JPEG or .PNG
.JPEG .JPG or .JPEG or .PNG
.PNG .JPG or .JPEG or .PNG
.GIF .JPG or .JPEG or .PNG

 

GIFs can be uploaded into Omniupdate! The system still allows for GIFs to be uploaded and inserted into pages. The above refers to the Image Editor functionality. GIFs can only be changed when saved as a JPG, JPEG or PNG file.

GIFs are still uploaded using Upload in the Content tab:

Upload Button

...while the new Image/Upload button can be used for those file types that can be modified by the Image Editor (JPG, JPEG and PNG):

Image/Upload Button


Next Page


 

Saving or Uploading Images

After editing an image, the image can be saved to either the web server or local computer. The Save As button allows users the option of saving the file to a local computer hard disk, while the Upload As saves the file to the production web server directly. In both options the user has the ability to rename the file, and change the image type if desired (by simply changing the file extension). If the original file name is maintained, the original file will be overridden. The ability to overwrite a file of the same name on the production web server is only allowed by users of privilege level 8 and above).

Previous PageNext Page

 

Editing in File Browse Mode

To edit any image while browsing from a list of image files, click the Content tab, then switch to the Production server view by shown below. As images are always stored on the production web server, image files are only visible on the Production tab.

 

Image Editor - select file

Simply click on the name of any image file while browsing the Production server to edit existing images.

 

Image Editor - edit and upload

Click the Image/Upload button to select images on a local computer, edit, and upload to the  server.

 

Image Editor - select local file

Select an image from the local hard drive to open the Image Editor applet.

Previous PageNext Page

 

Editing Images in WYSIWYG Mode

To edit any image while using the WYSIWYG editor, simply click the Insert/Edit Image icon in the WYSIWYG toolbar. Any image can be selected and edited using the Edit Image button in the file selector window. Additionally, users can upload and edit any image from this same window by clicking the Upload button.

1. Click the Insert/Edit Image icon on the WYSIWYG toolbar.

Click insert image on the WYSIWYG toolbar

 

2. Click the File Chooser icon to change or edit an image.

Click the file chooser button

 

3. Click the Show Thumbnail button to open the thumbnail viewer.

Click Show Thumbnails to open the thumbnail viewer

4. Click the Hide Thumbnail button to close the thumbnail viewer.

Click Hide Thumbnails to close the thumbnail viewer

5. Click the Edit Image button to edit any file displayed in the Image Preview window.

Click Edit Image to open the applet

6. Alternatively, click the Upload button to open, edit and upload a file from a local computer.

Click Upload button to open the applet and select a local file

7. Click the Upload & Edit button to upload a file from a local computer and start the Image Editor applet.

Click Upload & Edit Image to open the applet and edit the image

Previous PageNext Page

 

Editing Functions

Available functions in the Image Editor are illustrated by the following chart:

Function(s) Description
Scale View The Scale View functions allow for zooming to see more or less of the image as it's being edited.  Note: the scale will not affect the size of the image file.
Resize function The Resize function allows users to physically resize the image in pixels.
Crop function The Crop function allows users to crop any selected portion of an image. Click and drag across any part of the image to select a part of the image, then click the Crop button.
Rotate function The Rotate function rotates the entire image counter-clockwise in 90 degree increments.
Undo function The Undo function reverts the last function performed (one level back).
Save As Function The Save As function allows users to save the image as a file on their local computer's hard disk.
Upload As function The Upload As function allows users to save the image to the website.

 

Clicking the Resize button opens the resize window. Enter dimensions in pixels for height and width. By default, changing either width or height will automatically change the corresponding pair's value. Turn off Scale Proportionally to adjust width and height independently. Turning off Resample Image will result in a larger file that is not optimized for the web.

Resize settings

The title bar of the floating Image Editor window indicates the scale of the current view (changed by clicking the Scale View function buttons), and the height and width of any selected area for cropping. When viewing the image at 100%, no scale indication is displayed. The largest an image can be scaled for viewing is 400% and the smallest is 10% of the actual size of the image.  Remember, scaling the image is for display purposes only while using the image editor — scaling does not change the actual size of the image file. The height and width indicators only appear when an area is selected for cropping (by dragging the cursor across any part of the image.

Titlebar indicators

Previous PageNext Page

 

Large Files and Memory Usage

The Image Editor is a Java Applet that provides a fast and effective way to edit images. Typical images on a website will likely be less than 100 KB and easy to edit.

The Image Editor can handle up to 10 megapixel images (e.g. aprox. 4000 x 2400 pixels). Any dimension of height and width that is under 10 megapixel is acceptable. Larger dimension files should be managed/edited prior to being uploaded to OU Campus.

The size of the file in MB (megabytes) is not a usable indicator, as both JPG and PNG files are compressed, and the amount of compression is unknown (e.g. a 6 MB file may work fine, whereas a 3 MB file won′t, because the 3 MB file is a highly compressed file with a larger than 10 megapixel dimension and the 6 MB file has very little compression but is smaller than 10 megapixel).

The 10 megapixel size is not a hard maximum, the amount of memory made available to the Image Editor is controlled by the browser. Some OS/browser combinations will allow the Image Editor to work with larger images (12–14 megapixel) but this can not be assured for all users. There is no way of guaranteeing the RAM needed to process images is available from the browser.

If an image that is smaller than 10 megapixel can not be edited, log out of OU Campus, quit and relaunch the browser. This will free up browser-allocated RAM for the Image Editor. A memory leak bug in a browser can, if it has been running for a very long time or the user has many pages open, prevent the Image Editor from processing the image.

One test a user can make that will indicate that the image that is loaded into the Image Editor can be processed and uploaded to the server is to zoom into 400% (full zoom), if the image is still visible, it will work. If the Image Editor window turns white (the user’s image is not displayed), then there is not enough memory available to the Image Editor application to complete the editing and upload process. If this happens try logging out of OU Campus, and then quit and relaunch the browser. Many applications running at once or have many browser windows (or tabs) may also limit the amount of memory the browser will give to the Image Editor. Quitting some applications before relaunching the browser can also help.

Best practice note: Before clicking the Save As or Upload As buttons, return the zoom setting to 100% as this will also free up memory internal to the Image Editor application.

Previous PageNext Page

 

Image Refreshing (Browser Cache)

Two different software tools can clash in an attempt to do their jobs. If pictures do not update to the edited version in Preview mode, the Image Editor and web browser might be clashing.

A browser stores copies of pages of visited pages, then brings up these stored files upon the next visit. This way, the browser is not being forced to load the page anew with each visit, which takes more time than simply viewing a stored copy. This storage of pages is called a "cache." However, this cache can sometimes pose a problem when viewing the most updated version of a page is needed. Clear the browser's cache to ensure viewing of the most recent versions of a page.

To refresh the page and clear the cache while in Preview mode in OmniUpdate, right-click in the frame/window the image is in, then choose Refresh or Reload.

Previous PageNext Page

 

Troubleshooting

Q. The Image Editor not working. When button is clicked nothing happens.

A. There are several things that could contribute to the Image Editor not appearing when the Upload button is clicked. For example:

  • Java with OS X 2012-006 Update

    Apple released Java for OS X 2012-006, which uninstalls the Apple-provided Java applet plug-in from all web browsers. Once the update has completed, a user needs to re-install the Java plug-in. When encountering an item that requires the plug in, click on the region labeled “Missing plug-in” to download the latest version of the Java applet plug-in from Oracle.

    Once updated, both the Safari and Firefox browsers can utilize OU Campus functionality that uses Java, such as the Image Editor. Chrome for Mac does not support Java 7 as it is a 32-bit browser.

    For more information:

    Java Downloads: http://www.java.com/en/download/manual.jsp

    Apple Support: http://support.apple.com/kb/HT1222

  • The Image Editor window opened behind the browser window. Check your task bar or minimize the browser window.
  • Java may not be installed, outdated, or disabled. The Image Editor minimally requires Java 5 installed to be able to use it. If Java is not installed, install the most recent version:

    Java Downloads Page

     If Java is disabled, enable Java in the control panel. 

  • The browser might be out of memory (RAM). This can happen when a browser has many tabs open or hasn't been restarted recently, or with large files or lengthy editing periods. Restarting the browser can resolve these issues.

Previous Page

 


Was this page helpful?

Additional Comments:


(Include your email address if you would like a reply)