Adding Images, Media and Files

Contents


To add images, files, or embedded video or audio to your page, select the media icon in the toolbar of the content area where it should appear, usually the Body area.

 

There are four tabs which you can use to view, select or upload images and documents (Word, PowerPoint, Excel and PDF), or add links to display videos from YouTube and Vimeo, individual tweets from Twitter and files from SoundCloud.

 

My Files: These are files that you have already uploaded yourself through the Upload tab.

All Files: These are all of the files that have been uploaded.

Web: This option is an easier way to embed a video from YouTube or Vimeo, an individual tweet from Twitter, or a file from SoundCloud.  Just grab the share link to the individual file that you want to use and paste it in.

Note: For platforms not covered, disable rich text for the code view and paste in the embed code.

Upload: Upload images, PDFs, or other documents here.
 

Finding Files with Sorting and Filtering

File name, type, collections, sort by and order are all ways to sort through existing files.

You can search for a specific file by name if you know exactly what you are looking for.  Otherwise, use one of the dropdowns to sort through the files.

Type allows you to filter through all the files and return only a specific file type.  You can filter by images, MS Office files or PDFs, SoundCloud files, posts from Twitter or video files. Note that although SoundCloud, Twitter, and video files are embedded media, this tool catalogs and tracks them like actual files with a thumbnail and file name.

Collections offers a quick way to find photos or videos of the campus and student life commissioned or produced by the College, as well as approved photos for the College's faculty and administration.

The Sort by dropdown allows you to filter by the date a file was uploaded or use count, which tells you how many times a particular file has been used on the site.  You can sort those files in either ascending or descending order by using the Order dropdown.

Files, their types, and which pages they are on can be seen via My Workbench and selecting the File List tab.
 

Selecting Existing Files and Uploading New Files

Images

In either the My files or All Files tabs, filter for images by sorting by Type and selecting Image.  Select an image by clicking on the preview images or icons, then click Submit

Select which size you would like from the dropdown menu labeled Current format is (this works the same way as the former inline image sizes).  Then click Submit again.

Once you have uploaded an image, you will see a Remove button.  If you'd like to cancel the upload, select Remove, then Cancel

Note: When inserting an image into a content field, the editor shows a square crop of the image. After either saving the page as a draft or publishing the page, the photo is displayed properly according to size selected.

 

Unsaved

 

Saved

 

The default placement for an image is centered on the page with text above and/or below.

To place the image to the right or left on a page with text wrapping around it, click on the image to select it, click the image properties in the toolbar. Under image properties, select left or right for Alignment.

 

 

If the image that has been inserted is disorted, select the image and click the Image properties icon. Click the lock button to ensure the ratio of image proportions is locked. 

Tips:

  • For the best quality image, select the largest image size and then manually resize the image in the image module through height and width

 

Videos

Videos must be hosted on YouTube or Vimeo.

Many videos have already been used on the site, to find them go to All files, filter for videos by sorting by Type and selecting Video. Select a video to insert by clicking on the preview image, then click Submit.

For a new video, get the link to the video via the share tool, go the Web tab, and paste the link, then click Submit.

Note: When inserting a video, the WYSIWYG preview similarly displays properly once saved without requiring you to make any adjustments.

Videos will always take 100% of the width of the content area.

 

Documents

Filter for documents by sorting by Type and selecting MS Office, PDF, etc.  Select a document to insert by clicking on the preview icons, then click Submit.

Go to the Upload tab to upload a new file.

[ To cancel an upload, once a file has been uploaded there is an option to Remove the file.  Select Remove, then Cancel. ]

Selecting submit inserts the title of the document with a link to the document which is not editable. To use other text as a link to the uploaded file, after uploading the file:

  • right-click and copy the link displayed in the upload window
  • click Cancel
  • select the desired text within the content area
  • select the link tool, and use ctrl-v (cmd-v for macs) to paste the link into URL area.

In this case, you will have to add an icon yourself from the styles dropdown menu. Be sure that your cursor is within the linked text.

Embedding Media

The media module allows you to embed media from YouTube, Vimeo, Flickr, SoundCloud and Twitter through the Web tab.

YouTube: go to the page of the video you want to embed, click share,  copy the link and paste it into the web tab.

Vimeo: go to the page of the video you want to embed and copy the link.

Flickr: go to an individual picture that you want to embed, click share, copy the link and paste it into the web tab.  Click save, then submit.  You'll need to set the image size by right-clicking (command-click for mac) on the image and selecting Image Properties.  Click the padlock icon to unlock the width and height, and set the width you want the image to be.  The height will automatically adjust.  Then click OK.

Twitter: Click on the individual tweet that you want to embed, then click the “Details” link.  Copy the link from that page and paste it into the web tab.

Once you have the link to your chosen media file:

  • click the media module icon
  • select the Web tab
  • paste in the URL
  • click submit

Media on other platforms

To embed media hosted by other services like Issuu or Google or a Flickr album slideshow:

  1. Copy the embed code (method depends on service)
  2. In the code view for the field where the item should appear – click "Disable rich-text" below the box – find the desired location and paste the code.
  3. Publish and save

Deleting Files

The list of files uploaded to the site can be found under Find Content. Please be careful to not delete someone else's file. Using a good naming convention will help prevent any confusion.