TTUHSC Information Technology
HomeInformation TechnologyInformation ServicesInformation Services TrainingOU Campus CMSEditing Content

OU Campus Content Management System

Training Guide

Upload, Insert and Edit Images & Media

Binary files (Flash files, JPEGs, PDFs, videos, etc.) can be can be uploaded several ways:

  • Upload in the Content > Pages list view
  • Upload from the WYSIWYG Insert/Edit Image window

New in Version 10

Binary files (images and documents) are managed on the staging server in conjunction with a new feature called Binary Manager. When linking to a file, use the file browse button to create a dependency tag which links to the file. If the linked file is renamed or moved, the Binary Manager automatically updates the link instead of creating a broken link. Binary files must be published to production either with the webpage publish, or in a separate step.

Drag and drop functionality allows users to upload, move, and insert files in the OU Campus interface.

Allowed Extensions - File Type and Folder Restrictions

Images and Documents can only be uploaded to their respective folders. Allowed Extensions and Blocked Extensions tell users what type of files can be uploaded to the selected folder in the Upload to window. Main directory folders will not allow documents and images to be uploaded in that location. If attempting to upload an image to the main folder, the error message will display, "Invalid document extension." Navigate to the corresponding folder to upload the allowed file type. For example, if you are uploading a PDF or Word document, make sure you are in the Documents folder or you will receive an error message.

upload error file extension

Upload Images from the Content > Pages list view.

Go to Content > Pages to see the file list view. Select the Images folder (or Documents for PDFs, etc.) and click Upload.

content pages upload

A new window will open with Upload to options. Select options depending on the task at hand. See details below for file upload options.

upload to standard

Click the Add Files button to select files from your local machine or use Drag and Drop.

Click Start Upload.

File Upload Options
  • Access Group - Level 9 and 10 Administrators can limit file access to certain groups, but individual users can can only limit access from any group to which they belong.
  • Upload Type:
    • Select Standard to upload image as is.
    • Choose Upload and Edit Image if the image needs to be cropped, resized, or rotated before use.
      • As soon as you select a file to upload, the Image Editor panel displays to allow functions such as resize, crop, rotate, etc.
      • Edit the image as needed, then click Upload when done.
      • Save As window lets you rename the file before saving.
      • Click Save and the image is uploaded to the images folder.
    • Zip Import allows an already created .ZIP file to be imported and extracted.
  • Overwrite Existing
    • Check the box if you want to replace the existing file with the new uploaded file using the same file name.
  • Drag and Drop files from your computer to the Upload window OR click Add Files to browse for files on your local machine.

 Upload, Insert & Edit images using WYSIWYG

Users can upload files while editing a page using the WYSIWYG toolbar. Web-ready images can be uploaded as is, or images can be cropped, rotated, resized, etc using the Image Editor. Learn more about the WYSIWYG toolbar and Image Editor.

In OU Campus, select a page to edit from the Content > Pages list view, or login directly to a page and click the Edit button in the editable region on the page.

page actions 

The WYSIWYG editor loads and the page is in edit mode.

WYSIWYG toolbar with options

Place your cursor where the media is to be inserted and click the Insert/Edit Image button OU Campus insert edit link button on the WYSIWYG toolbar, or right click to select Insert/Edit Image.

insert edit link button on toolbar

A new Insert/Edit Image window will open. Click the File Browse Button to select a file (and/or upload a new file) and create a dependency tag, which will update the link if the file is moved or renamed. Learn more about Dependency Tags and Binary Manager. Users can also enter a URL for an external image that is not hosted on TTUHSC web servers.

insert edit image file browse button

A new Select Image window opens with several options:

  • On the left side of the window, double click a folder name to browse files on the staging server and select an existing image to see a preview of the file. Click Insert to use the image or Upload a new image.
  • To upload a web-ready image, click Upload and a new Upload to window will open to select files.
  • OR select Upload and Edit to open the Image Editor to crop, resize, or rotate an image before use.

select image upload

After selecting Upload or Upload and Edit, a new window Upload to opens to select images.

upload to standard

Drag and drop files into the window, or click the button Add Files and select a file from another location, then click Start Upload.

Notice the allowed file extensions which prevents certain files from being saved in the wrong folder location. All images and documents need to be saved in their respective folders.

If Upload and Edit was selected, as soon you select a file the Image Editor interface displays your image with editing buttons on the left.

image editor full screen

Edit image as needed and click Upload or Cancel to exit. Learn more about the OU Campus Image Editor.

Users then have the option to re-name the file. Remember to include the file extension (security-camera.jpg) in the file name.

image editor file rename

Click Save and the edited image is uploaded to the staging server and should display in the folder structure on the left side of the Select Image window.

Now that the file has been uploaded to the server, Select the image by clicking on the file name and view a preview on the right side of the window.

select image preview

Click Insert and you will return to the Insert/Edit Image window to enter an Image Description and Title (alt. text) and other display options.

alt text required

Alt. Text is required on all images according to web best practices and Section 508 standards. Type a short description for the image in both fields. Assistive technology like screen readers will read the description or title of the image for users that cannot view the image on the page.

insert edit image alt text description

Users can adjust the display options by click on the Appearance tab.

appearance tab insert edit image

Appearance options include:

  • Change display dimensions (file size remains the same)
  • Add a border
  • Left align, right align, top, bottom, etc...

After selecting options click Insert.

The image is now inserted on the page and users return to page editing mode with the WYSIWYG toolbar and can continue editing the page.

To make additional edits to the image, select the image on the page and again click the Insert/Edit Image button to re-open the Insert/Edit Image window and options.

To delete an image, select it on the page and click Delete or Backspace.

Images and documents (binary files) are managed on the staging server and must be published either with the page publish, or in a separate step. Learn more about binary manager.

Upload and link to Documents

If you are uploading and creating a hyperlink to a document file, the process is similar to inserting/uploading images.

insert edit link button on toolbar

Select the text on your webpage to serve as the hyperlink by clicking and dragging with your mouse.

hyperlink highlighted text

Click Insert/Edit Link on the WYSIWYG toolbar, or right click and select Insert/Edit Link. insert edit link icon

To create a dependency tag, click the File Browse button to upload a new document or select an existing document on the staging server.

insert edit link browse

In the Select File window, double click the Documents folder in the file navigation on the left side of the window to upload the PDF.

Click Upload and a new window will open to add files.

select file document

In the Upload to window, click Add Files and select a file from your local machine OR Drag and Drop your file into the Upload to window.

 upload to documents

Notice the Blocked Extensions which prevents files like JPEG images from being uploaded into the documents folder.

Users have the option to Rename the file or click Start Upload to upload the file.

The file should now display in the documents list view on the left side of the Select File screen.

select file document pdf

Click on the PDF file name to select and click Insert.

The Insert/Edit link window shows the url to the image and users can select display options.

 insert edit link to document

For PDF and Word Documents, set the Target to Open in a New Window. Links to webpages within the same site, set Target to Open in This Window)

Select the Class PDF Link which will display the Adobe Reader Icon.

Click Insert and the hyperlink text will display red with the Adobe Reader Icon.

link with adobe reader icon

Finish editing the page and click Save on the WYSIWYG toolbar

Publish the page from the page actions menu, which will publish the images as well.

 


Previous PagePrevious Page

Next Page Next Page

©