Western Kentucky University

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:
Upload Icon from 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 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.
    Image URL Icon
  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.
    Show / Hide Thumbnails
  5. Alternatively, you can click Upload or Upload & Edit to upload an image from your computer.
    Upload and Edit
  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.
    Upload from Computer
  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.
    Edit Image already Uploaded
  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.)
    Upload and Save As
  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.
    Image Description Textbox
  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.)
    Image Appearance Tab
  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 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.
    Production Tab
  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.
    Production Tab Image Edit
  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.
    Production Tab Image / 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.

 

 


 Last Modified 4/30/14