By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy

 
Skip to Content

Images

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:
    A box showing choosing an image, an orange arrow points to a link in the bottom right that says "Edit 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.
A screenshot of an interface for editing images. Tools are "Resize," "Crop," "Rotate," "Zoom," "Undo," and "Redo." The image being edited is a photo of a chubby gray cat, lying on its back with its paws tucked to its chest.
The interface for editing an image.

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.

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.

Once an image has been added to a page, it can be swapped out for another by either right-clicking the image and selecting "Insert/Edit Image" from the menu, or clicking on the image and selecting the Insert/Edit Image icon (A blue mountain icon. or A black landscape icon.) 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.

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, 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.

Binary Management

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.