Inserting a single image from your computer

NOTE: All uploading and navigating involved in this tutorial occurs once logged in to OU Campus. Be sure to log in from the department’s homepage.

  1. Begin by navigating to the page (or creating a new page) needing the table. Choose the Edit button in the upper left corner. Then, click on the green edit button in the content area where you would like to insert the image. This will bring up the WYSIWYG page editor.
    Insert image screen shot: Step 1a
  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 'Select Image' window now appears. Navigate to the 'images' folder for your department site and click the 'Upload' button. TIP: Use the 'Filter' box to search for your department folder.
    Insert image screen shot: Step 4
  5. The 'Upload to [/path/to/your/images/folder]' window now appears. Click green '+Add' button (or drag files from desktop.) The image file name will appear in the field. Please note: the file chosen for this tutorial uses improper naming conventions (capitals and underscores). OUCampus detects issues like this and gives an invalid filename warning. Correct this by hovering over the error message and clicking 'Rename'. Be use to use the proper naming convention (no capitals, hyphens between words, no special characters). Remember to include the file extension when renaming. Then click 'Start Upload'. A message will appear when the image has been successfully uploaded. Click 'Close'.
    Insert image screen shot: Step 5a
    Insert image screen shot: Step 5b
    Insert image screen shot: Step 5c
  6. Back in the 'Select Image' box, select that image in the list of files on the left, click on it and click 'Insert'.
    Insert image screen shot: Step 6
  7. Now, back in the 'Insert/Edit Image' box (under 'General' tab) fill in 'Image Description' field which is required for users utilizing screen readers.
    Insert image screen shot: Step 7
  8. In the same box, click 'Class' 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