Media

Component

Best Use: To illustrate content.

Media can be used to display an image or video on your page. This is a flexible component with a number of options designed to suit various situations. Below is a detailed description of the settings for each media type.

Image

This is a single, still image. Use the settings below to adjust how it displays on the page.

Image
Select or upload the image you want to use.
- See Web Image Guidelines from public affairs for advice on how to find and use good images.
- Name the file using a naming protocol. Example: reed-new-students-orientation.jpg (for an image to be placed on the Orientation page of the “new students” site). This helps you organize and later locate your photos.
- Keep your images in your “assets” > “images” folder. This allows new content editors to quickly learn where images are located when they need to be replaced.
Position
See Settings for all media types below
Image Aspect Ratio
See Settings for all media types below
Alt text
For accessibility, describe in fewer than 155 characters what you see in the image. This will not be visible on the page but it is important for screen readers. Example: Three students wearing warm jackets, hats, and gloves walk across a bridge on campus. Snow blankets the trees around them.
Caption
Optionally, add a caption that will display below the image.

Here’s an example of a horizontal (4:3) image positioned left:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lobortis odio a varius. Aenean porttitor dui elit, sit amet consequat massa sodales a. Quisque ac tincidunt tortor. Nam ante urna, semper vel orci sit amet, mollis euismod turpis. Quisque ultricies egestas turpis sit amet mollis. Sed faucibus ante eget arcu viverra, euismod mattis tellus venenatis. Sed elementum, sem eu euismod venenatis, nisl diam porttitor sem, semper maximus leo nulla a metus. Aenean eget purus in dolor dignissim posuere. In hendrerit rutrum iaculis. Sed ac dolor purus. Phasellus felis lacus, scelerisque eget suscipit eu, ullamcorper at tellus. Suspendisse sagittis, quam id mattis pretium, sem elit dictum sapien, sit amet consectetur orci ante vel sapien. Nullam leo eros, faucibus quis faucibus eu, blandit ut ante. Praesent nec gravida leo, aliquam gravida lorem.

Video

Embed a Reed-owned or licensed video from a video host like YouTube, Vimeo, or Panopto.

Video Embed Code
Typically found through the video’s Share button, copy and paste the “embed code” here.
Position
See Settings for all media types below
Caption
Optionally, add a caption that will display below the image.

Here’s a YouTube video in a center position:

This is Reed

Video with cover image

A combination of image and video, this allows you to display a custom image on the page, which when clicked will load the video as a full-screen overlay.

Image
Select or upload the image you want to use as the cover image. A “play” icon will automatically be added on top of it to let people know to click it.
Video URL
Unlike the Video option above, you don’t need the full embed code. Just enter the URL of the video.
Position
See Settings for all media types below
Image Aspect Ratio
See Settings for all media types below

Here’s a video with a square cover image positioned left. The square setting only affects the cover image. The video overlay will be the video’s normal size.

Settings for all media types

Position

This sets where the image will be positioned on the page.

Left
The image will “float” to the left of the page. Text will flow around it on the right.
Right
The image will “float” to the right of the page. Text will flow around it on the left.
Center
The image spans the full width of the content area. Other components will stack above or below it.
Center - Wide
This only works with a single column page layout. It’s the same as Center, but the image will be wider than other text on the page.
Center - Widest
Same as Center - Wide, but the image will extend all the way to the edge of the screen.

Image Aspect Ratio

This sets how the image will be cropped, according to a ratio of width by height (w:h).

Auto
The image will be displayed in its full original dimensions. No cropping.
Widescreen (16:9)
This is a little wider and shorter than a typical horizontal image. It’s a common ratio for online video, but you can use it for a still image, too. This is a god option to use when Position is set to Center (any width).
Horizontal (4:3)
A typical horizontal image. This is a god option to use when Position is set to Center (any width).
Square (1:1)
Used best with images where the primary subject is in the center. This is a good option to use when Position is set to Left or Right.
Vertical (3:4)
A typical vertical image. This is a good option to use when Position is set to Left or Right.