Image Editor

Introduction

Allows images on your website to be resized, cropped, and rotated directly in OU Campus. Additionally, a new function allows users to upload and edit an image in one operation. This helps ensure large images are properly resized before they ever land on your 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.

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. The latest version of Java is recommended: Windows - Java 6 (1.6 version 13).   Macintosh - Java 5 (1.5 Update 3) .

No matter how you access the Image Editor, a new floating window opens giving you the ability to zoom, resize, crop, and rotate your 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 as you save it 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

 

This does not mean that you cannot still upload GIFs into Omniupdate! You absolutely can. The system still allows you to upload GIFs and insert them into pages the same way it has always allowed. The above only notes that you cannot use the Image Editor to change a GIF unless it is saved as a JPG, JPEG or PNG file.

In addition, you must continue to upload GIFs using the old "Upload" button in the "Content" tab:

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

 

Saving or Uploading Images

After editing an image, the image can be saved to either the web server, or your local computer.  The button named "Save As..." allows users the option of saving the file to their local computer hard disk, while the button named "Upload As..." will save 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).

 

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 your production web server, you can only see image files in the Production view.

 

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

 

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

 

Select an image from your local computer hard disk to open the Image Editor applet.

 

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.

 

Click the Insert/Edit Image button on the WYSIWYG toolbar.

 

Click the file chooser button to change or edit an image.

 

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

 

Alternatively, you can click the "Upload Image" button to open, edit and upload a file from your local computer.

 

Editing Functions

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

 

Function(s)	Description
	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.
	The Resize function allows users to physically resize the image in pixels.
	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.
	The Rotate function rotates the entire image counter-clockwise in 90 degree increments.
	The Undo function reverts the last function performed (one level back).
	The Save As function allows users to save the image as a file on their local computer's hard disk.
	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.

The titlebar 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.

 

Large Files and Memory Usage

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

The image editor can handle up to 10 Megapixel images (eg. 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 (mega bytes) is not a usable indicator, as both JPG and PNG files are compressed, and the amount of compression is unknown (eg. a 6MB file may work fine, whereas a 3MB file won't, because the 3MB file is a highly compressed file with a larger than 10 Megapixel dimension and the 6MB 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. We have 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, we suggest logging out of OU Campus, and quit and relaunch the browser, as this will free up browser allocated RAM for the Image Editor. Mozilla's Firefox 3 has a known memory leak bug, and can - if it has been running for a very long time, or the user has many Firefox 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 we recommend the steps described above to log out of OU Campus and then quit and relaunch your browser. If you have many applications running, or have many browser windows (or Tabs) open, these may also limit the amount of memory the browser will give to the Image Editor. Quitting some applications before relaunching your 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.

 

Image "Refreshing" (Browser Cache)

Technology is built and designed to try to meet our every need; sometimes, this drive can cause two different tools to clash with one another in their attempt to do their jobs. If your pictures do not update to their edited version in "Preview" mode, then this is just what has happened with the Image Editor and your web browser.

While you surf the Web, your browser often stores copies of pages that you have visited, then brings up these stored files the next time you visit a site. This way, the browser is not being forced to load the page anew each time you 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 to you if you need to be viewing the most updated version of a page. To be sure that you are looking at the most up-to-date version of a page rather than an older copy, you clear your browser's cache.

To refresh the page and clear your cache while in "Preview" mode in OmniUpdate, simply right-click in the frame/window in which you see your image, then choose "Refresh" or "Reload" from the mouse menu that appears.

 

Troubleshooting/FAQ

The Image Editor won't work. I click the button, but nothing happens.

There are several things that could contribute to the Image Editor not appearing when you click on the "Upload" button(s):

• Java may not be installed.
  • If it is not installed, install the most recent version. You can find the downloads here.
• You have an older version of Java.
  • The earliest version with with the OmniUpdate Image Editor has been 100% confirmed to work is version 1.6.13 (Windows). Update to this version of Java or newer (you can do so here).
• The correct version of Java is installed, but it is disabled through the control panel.
  • Enable Java in the control panel. Speak with a member of your IT department if you need assistance with this.
• Your browser might be out of memory (RAM).
  • This can happen when you:
    • leave the browser running for days at a time without restarting it
    • have many tabs or windows open
    • are using the Image Editor extensively to work with large files, or to work with regularly-sized files for a lengthy period of time
  • Restarting your browser will resolve all these issues. Simply close it by clicking the "X" in the upper right-hand corner, then restart it from the "Start" or "Programs" menu.