IT Division - OU Campus - Self Help

Uploading and Editing Images

You can either upload the edited images, or you can take advantage of OU Campus' Image Editor to modify the image once uploaded.  The Image Editor allows images on your website to be resized, cropped, and rotated directly in OU Campus. The Image Editor can be used in two parts of the system. While viewing a list of files on the production server, click the Content tab, then click the Production view.  Or, insert images on a web page using the WYSIWYG editor.

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. Changing the extension of any image file when you save will convert the file to a web-optimized version of the chosen file type.

You must upload (GIFs) using the "Upload" button from the Page List View:

Every site will be set up with an Images Folder (named "images").  As a best practice, it is recommended that images are added to the Images Folder on your site.

Please watch our video tutorial or download the PDF of Step By Step Guide for further assistance.

Step By Step Guide for WYSIWYG Image Upload

1. Within the WYSIWYG click the location you want to insert an image.
2. Click on the image icon  on the WYSIWYG toolbar.
3. Click on the button to the right of the Image URL field.  A list of images will appear.  If you are inserting a new image, it will be placed in your Images Folder.
   
4. To preview all the images in a directory by the Thumbnails feature, show or hide thumbnails by clicking the Hide Thumbnails / Show Thumbnails button.
   
5. Alternatively, you can click Upload or Upload & Edit to upload an image from your computer.
   
6. Another box will pop up where you can select the image from your computer and rename the image. We do not allow capital letters, spaces or special characters (except dashes ( - ) and underscores ( _ ) in file names. If the image file has any of those characters, it will give you an error. You can rename that file in the New File Name text box. To choose the file from your computer hit the Browse button.
   
7. Once the file has successfully been uploaded you will receive a confirmation dialog box.
8. The image can now be selected to insert into the page or edited.
9. To choose an image for editing, click the Edit Image button.
   
10. Once the image editor screen comes up, you can modify the image with the button on the top. Click on the Upload As… button to upload the image to the server, or you can click on the Save As… button to save the image on your computer. (Please Note: You must have Java installed to use the OU Campus Image Editor.)
    
11. Before you can insert this image onto the page, you must enter an image description. Choose two or three keywords that describe the image and type them into the Image Description field.
    
12. Click the Insert button at the bottom of the dialog box to insert the image.
13. From the Appearance tab, you can modify the image’s dimensions, border and/or padding. (Please Note: As a best practice, do not use the Dimensions text boxes to resize an image. This will only scale the image. When a page loads, it will take longer to load if a much larger image. If you want a smaller image, please use the Edit Image feature described above.)
    
14. If you would like to edit an image that is already on a page, you can click on the image and click on the Image icon  in the WYSIWYG toolbar.
15. If you would like to delete an image already on a page, you can click the image and hit the Backspace or Delete key on your keyboard.

Modify Images through Page List View

1. You can alternatively insert or modify an image in the Page List View. In order to view the images you have uploaded, you will need to change to Production View by clicking the Production tab in the top right of the File list.
   
2. If you would like to edit an image that has already been uploaded, click on the image while browsing the Production Server. Then follow instructions in #11 above.
   
3. You can upload and edit image, as if it were in the WYISYWG editor. Click the Image / Upload button to select the image from your computer and edit it on the upload.
   
4. If you do not need to modify the image after you upload it, you can use the upload icon from either the Production View or Staging View.