Section Menu

Inserting a single image from your computer

NOTE: All uploading and navigating involved in this tutorial occurs once logged in to OU Campus. For instructions on how to log in, watch the Tour video. Be sure to log in from the department’s homepage.

  1. After navigating to the page needing an image, click 'edit' at the top of the window. Then click the green 'edit' button in the content area that requires the image. This will launch the WYSIWYG editor window.
    Insert image screen shot: Step 1a
    Insert image screen shot: Step 1b
    Insert image screen shot: Step 1c
  2. Find the spot in the window for the image and click your cursor in that location near the text. In this tutorial, the location chosen for the image will be near the top of the page, so the cursor is inserted to the left of the first word of the first paragraph. Now, click on the 'insert/edit image' icon (appears in the middle of the second row of icons and looks like a mountain with the sun) at the top of the WYSIWYG editor window.
    Insert image screen shot: Step 2
  3. The Insert/Edit Image window now appears over the editor window. Click the 'browse' icon to the right of the 'Image URL' field.
    Insert image screen shot: Step 3
  4. The File Browser window now appears. Navigate to the 'images' folder for the department site and click the 'Upload' button.
    Insert image screen shot: Step 4
  5. The 'File Upload' window now appears and is ready to find the image for uploading. Click 'Browse' to the right of the 'File From Your Computer' field and navigate to the image that is stored on the computer and open that file. The name will appear in the field. Please note: the file chosen for this tutorial uses improper naming conventions (capitals and underscores). Correct this by entering a new name in the 'New File Name' field directly above it using proper naming conventions (no capitals, hyphens between words, no special characters). Remember to include the file extension when renaming. Then click 'Upload'. A message will appear when the image has been successfully uploaded.
    Insert image screen shot: Step 5a
    Insert image screen shot: Step 5b
    Insert image screen shot: Step 5c
  6. Back in the File Browser, find that image in the list of files on the left, click on it and choose 'Select File'.
    Insert image screen shot: Step 6
  7. Now, back in the Insert/Edit Image window, in the General tab fill in 'Image Description' field and the 'Title' field as desired. 'Image Description' is required and is valuable information for users utilizing screen readers.
    Insert image screen shot: Step 7
  8. In the 'Appearance' tab, leave all settings as they are except 'Class'. Click on the arrow to reveal choices for positioning and choose which best fits the content. Click insert. The image will now appear in line with the content of the page.
    Insert image screen shot: Step 8a
    Insert image screen shot: Step 8b
  9. Repeat these steps anywhere on the page an image is needed, then save and publish when ready.
    Insert image screen shot: Step 9

Congratulations! You just inserted an image into a page.

If you do not see images in Preview after saving, here's how to fix it:

Problem: The default setting for OU Campus Preview is for the Production (Main) web server. Therefore, if Preview is left in default setting, unpublished images will not show in preview.

Fix: Change the Preview location to Staging. There is a select box in Preview, in the upper right, on the same row as the big green Publish button. Change from Main to Staging, and image previews will come from the Staging server.

screen shot of how to change the Preview server location

©