OU Campus stores images in its file system along with pages and other types of files like PDFs. Add images to your OU Campus site by uploading them. Once an image has been uploaded, you can add it to pages. Like pages, images must be published before they can be seen on your website.
Images share most of the same behaviors as pages. For example, you must check out an image to edit it. They also have the same file, review, and publish options. However, images have fewer access settings and properties compared to pages, and no source code editing.
Supported Image File Types: bmp, gif, jp2, jpe, jpeg, jpg, png, svg, tif, tiff
Images can also be uploaded into image size sets, creating linked copies of each image according to specific predefined dimensions.
Editing ImagesLink to this section
Images have their own editing interface that differs from the WYSIWYG editor for pages.
To edit an image:
- In Content > Pages, hover over the image and select Edit > Image.
- Click the image name to open it and you'll automatically be taken to the editing view.
- When uploading an image, you can choose to upload and edit.
- When selecting an image from a file chooser, there is an option to edit the image:
Click this to edit the image. Once you save any changes or cancel, you're returned to the file chooser and you can insert the image onto your page.
The tools available for editing images are:
- Resize: Enter a width and/or height for the image, in pixels. Check "Preserve Ratio" to keep the original proportions of the image. Click "Resize" to apply your changes.
- Crop: Drag the dotted outlines around the image to define the cropped area. You can choose an aspect ratio for the crop; use "Custom" for the crop ratio to be unrestricted. "Swap width & height" swaps the numbers of the aspect ratios. Click "Apply Crop" to crop the image.
- Rotate: Click "Rotate" to rotate your image 90º to the right.
- Zoom: Use the + and - magnifying glasses, or type in a percentage, to zoom in and out on the image. "Original" returns the picture to its actual size. "Zoom to Fit" scales the image to fit the editing window. This tool doesn't change the image, just zooms in and out to make it easier for you to edit.
- Undo: Undoes your last change.
- Redo: Redoes the undone change.
Click "Save" to save your changes. "Save As" saves a copy of the original image with the changes you made.
Publish the image for the changes to be visible on your live website.
Is a recently-uploaded image not displaying on your page? Make sure you publish the image!
Updating Images on PagesLink to this section
An image can be edited after it's been placed on a page or pages. Once the image is published, any pages with that image are automatically updated to show the new image.
Once an image has been added to a page, it can be swapped out for another by:
- Either right-click the image and select "Insert/Edit Image" from the menu
click on the image and select the Insert/Edit Image icon ( or ) from the toolbar.
- Use the filechooser to select a new image, and click Insert.
- If dimensions or other settings had been specified for the old image, they may need to be altered for the new one.
- Republish the page and clear cache if necessary to see the updated image.
Note: The new image must be published as well if it was not before, either manually or by selecting "Include Unpublished Dependencies" on page publish.
Another way to swap images on a page is to upload the new image and overwrite the old one. For this to work, the new image must have the same name and extension and be uploaded to the same location as the old one. Publish the new image to your live website, and it is automatically updated on any pages containing the old one. You may still want to check those pages, however, in case the old image had styling or proportions applied that interact strangely with the new image.
Not seeing an updated image? Clear your cache, the images and styling that your browser stores to reduce page load times. A hard refresh (Ctrl+F5 on PC, Cmd+Shift+R on Mac) also reloads the image.
If you have binary management turned on, then your images are tracked by dependency tags. This means that when an image is renamed or moved, any pages containing that image are automatically updated so the image doesn't break. If an image is deleted, it's treated as a broken link in link check and the broken pages report.