Embedding media

Many content blocks, such as the Flex Content Area and Promo Unit, are ideal for displaying images and text in a predictable structure. For more open-ended display, content editors can add images and video to pages through the rich-text editor, as described below.

Contents

Adding images and video with Media Library

Use the “Insert from Media library” button in the rich-text editor toolbar to add images and video.

The rich-text editor toolbar with the “Insert Media” icon highlighted

Use the popup modal to upload images, documents or to enter a video URL. To add images, documents or video, click the “Image”, “Documents” or “Video” tab on the left. Media items uploaded this way remain in the Media Library for reuse.

Add images and video with the popup modal

To add images click the “Browse” button. To add video, enter a video URL to the “Add Video (External) via URL” field and click the “Add” button.

Review existing videos and images as grid or table by clicking on the corresponding icon on the right. Filters are available to find items in the library.

Media library showing the table view of items

Adding media from third-party providers

Display videos other media hosted by most third-party providers in any page using the “URL” button in the rich-text editor toolbar:

The rich-text editor toolbar with the “URL Embed” icon highlighted

Use the popup to enter an image or video URL.

The “URL” generated popup to insert an image or video link

Reposition this media by dragging the block to the desired region in the layout.

The available media providers include the most popular services that support oEmbed for embedding third-party media assets, including YouTube, Vimeo, Twitter, Instagram, Facebook, Flickr, and so forth.

Full list of supported media providers: https://oembed.com/#section7

Manipulating media display

After adding an image or video, click on it to show the media options toolbar.

Showing the media options toolbar for inline editing of a media item

Several options are available for changing the image size, alignment, adding a caption, or setting instance-specific “alt” text.

The media editing options

Use the “Display” options to change the size of an image.

• Default: Renders the media item in its original resolution

• Large: Resizes the media item to 480 x 480 pixels

• Medium: Resizes the media item to 220 x 220 pixels

• Thumbnail: Resizes the media item to 100 x 100 pixels.

Notes

• Currently these display options will not change the size of videos or documents.

• Only use the alignment choice “None” for videos. Other alignment settings can cause display problems.

Other embeds that require <script> or <iframe> tags

Some third-party providers facilitate external content by an embedded snippet of JavaScript wrapped in the <script> or <iframe> tag. Examples include UT Information Quest and Trumba.

Using these tags from untrusted third parties can be a security risk, as embed codes are a technique for phishing or clickjacking.

For this reason, only users with the permission “Use the Full HTML text format” can insert these tags. If you have Drupal Kit Managed site, only users with the “Site Manager” role can use Full HTML. For other sites, see Permissions for content editing and site managing.

How to embed <script> or <iframe> tags

1. In any rich-text (WYSIWYG) editing interface, change the text format dropdown (below the rich text editor) “Full HTML.”

2. Click the Source button in the rich-text toolbar.

3. Paste the third party code and save.

Note

Content created with the Full HTML` setting will be restricted to users with the permission to use that setting. Users with a standard content editing role, for example, may not be able to edit it. For this reason, it is best to create a dedicated block of content for the <script> or <iframe> tags. Leave other content on the page with the “Flex HTML” setting so that all content editors can edit.