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.
- 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.
- 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 File Browser window now appears. Navigate to the 'images' folder for the department
site and click the 'Upload' button.
- 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.
- Back in the File Browser, find that image in the list of files on the left, click
on it and choose 'Select File'.
- 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.
- 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.
- 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.