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.
- 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.
- 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
- The Insert/Edit Image window now appears over the editor window. Click the 'browse'
icon to the right of the 'Image URL' field.
- 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
- 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'.
- Back in the 'Select Image' box, select that image in the list of files on the left,
click on it and click 'Insert'.
- Now, back in the 'Insert/Edit Image' box (under 'General' tab) fill in 'Image Description'
field which is required for users utilizing screen readers.
- 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.
- Repeat these steps anywhere on the page an image is needed, then save and publish
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.