Media Callout


There are three types of media:

  1. Single Image – This is a single image with a caption
  2. Carousel – This is a collection of images with a caption for each image, presented as a “slideshow”
  3.  Video – This is a single video, sourced from YouTube

Single Image

Title

This field holds the title for the Media Item. The Title is not displayed on the public website. It is used to identify the Media Item within the CMS. Make sure to provide a clear, descriptive title as you will use this title when selecting the Media Item to pull it into site pages. You may wish to preface the title with text to identify your department or office, for example Chem Eng – Undergrad Research Lab.

single-image-title.png

Media Type

This specifies the type of media. The Single Image option is selected.

single-image-media-type.png

Image (920x543 -- 1440x500 pixels maximum)

This field holds the image. The recommended dimensions are 920x543 pixels. The dimensions of the image cannot exceed 1440x500 pixels. If the dimensions of the image exceed this, it will be rescaled and cropped so that both dimensions are within these values.

single-image-field.png

Alternate text field – This field holds the alternative text for the image. Make sure to enter text into this field that provides a description of what’s pictured in the image.

Title field – This field holds the text for the “tooltip” that appears when a user hovers the mouse cursor over the image. Make sure to enter text into this field that provides a description of what’s pictured in the image. In most cases this will match the alternate text.

Caption

This field holds the caption that appears below the image. Use only basic text formatting. Links can be added. Note that the link text will be displayed in all capital letters.

single-image-caption.png

How the Single Image Media Callout appears on the website

The caption is positioned directly below the image. The caption can include linked text. The linked text is displayed in all capital letters (this is done automatically by the styles of the site.)

single-image-display-on-site.png


Media (Multiple Images –Carousel)

The carousel contains three (3) images and there is one set of fields for each image. The number of images in the carousel is set and cannot be increased.

Title

This field holds the title for the Media Item. The Title is not displayed on the public website. It is used to identify the Media Item within the CMS. Make sure to provide a clear, descriptive title as you will use this title when selecting the Media Item to pull it into site pages. You may wish to preface the title with text to identify your department or office, for example Chem Eng – Undergrad Research Lab.

carousel-title-field.png

Media Type

This specifies the type of media. The Multiple Images (Carousel) option is selected.

carousel-media-type.png

Image (920x543 -- 1440x500 pixels maximum)

This holds the image. The recommended dimensions are 920x543 pixels. The dimensions of the image cannot exceed 1440x500 pixels. If the dimensions of the image exceed this, it will be rescaled and cropped so that both dimensions are within these values.

Alternate text field – This field holds the alternative text for the image. Make sure to enter text into this field that provides a description of what’s pictured in the image.

carousel-image-field.png

Caption

This field holds the caption that appears below the image. Use only basic text formatting. Links can be added. Note that the link text will be displayed in all capital letters on the website.

carousel-caption-field.png

Changing the order of the images in the carousel

The ordering of the images is changed by dragging them to new positions in the list. To drag an image to a new position, left-click and hold the four-pointed arrow icon to the left of the image’s content fields and then drag up or down. When the image is in the desired position, release the mouse button and the image will “pop” into the new position.

The top-to-bottom ordering in the list translates to the left-to-right ordering of the panels on the page. Therefore, the image at the top of the list will be the image that is visible when the page is initially accessed by a website visitor.

How to remove an image from the carousel

If you wish to remove an image from the carousel, so the carousel will have fewer than three images, clear the content completely from all of the fields of the image you wish to remove.

How the Image Carousel Media Callout appears on the website

The page automatically adds the left and right navigation arrows for website visitors to navigate forward and back through the carousel.

The caption is positioned directly below each image in the carousel. The caption can include linked text. The linked text is displayed in all capital letters (this is done automatically by the styles of the site.)

carousel-display-on-site.png


Media (Single Video)

Title

This field holds the title for the Media Item. The Title is not displayed on the public website. It is used to identify the Media Item within the CMS. Make sure to provide a clear, descriptive title as you will use this title when selecting the Media Item to pull it into site pages. You may wish to preface the title with text to identify your department or office, for example Chem Eng – Grad Research Video.

video-title-field.png

Media Type

This specifies the type of media. The Single Video option is selected.

video-media-type.png

Image (920x543 -- 1440x500 pixels maximum)

This holds the image that is displayed until the video is played. The recommended dimensions are 920x543 pixels. The dimensions of the image cannot exceed 1440x500 pixels. If the dimensions of the image exceed this, it will be rescaled and cropped so that both dimensions are within these values.

video-image-field.png

Alternate text field – This field holds the alternative text for the image. Make sure to enter text into this field that provides a description of what’s pictured in the image.

Title field – This field holds the text for the "tooltip" that appears when a user hovers the mouse cursor over the image. Make sure to enter text into this field that provides a description of what’s pictured in the image. IN most cases this will match the alternate text.

YouTube ID

This field holds the ID of the YouTube video.

video-youtube-id.png

The ID of a YouTube video is found in the URL of the page for the video on the YouTube site.

For example, for this URL: https://www.youtube.com/watch?v=AcDLG4Re_xw

The ID is the string of characters is what follows the v= in the URL, AcDLG4Re_xw.

Heading

The Heading is displayed at the top of a blue panel that overlays the Image.

video-heading-field.png

Caption

This field holds the caption that appears below heading. Use only basic text formatting. Links can be added. Note that the link text will be displayed in all capital letters on the website.

video-caption-field.png

How the Single Video Media Callout appears on the website

The heading and caption are positioned against a blue background. The "play" button (the white triangle in a blue circle, is added automatically by the styles of the site.

video-display-on-site.png

Note that the “Play” button (the white triangle within the blue circle) is added dynamically by the callout. Below is how the callout appears after the button is clicked to play the video.

video-playing-on-site.png