This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Media

What are Media Items?

Core media items include audio, images, documents, and videos. You can add other media types, such as social media posts, through the use of contributed modules. Media items may be files located in your site’s file system or remote items referenced by a URL. Media items are content entities, and they are divided into media types (which are entity sub-types); media types can have fields. Refer to the Content Structure documentation for more information on content entities and fields.

What is the Media Library?

The media library is a visual user interface for managing and reusing media items. Add media items to content using Media reference fields and the Media library field widget.

What is an Image Style?

An image style is a set of processing steps, known as effects, that can be applied to images. Examples of effects include scaling and cropping images to different sizes. Responsive image styles can associate image styles with your theme’s size breakpoints. This allows serving images sized for the browser width.

Overview of Managing Media

The following modules provide media-related functionality:

  • Media items and media types are managed by the core Media module.
  • The core Media module provides a Media reference field to add media to content entities. The core File and Image modules also provide reference fields. It is recommended to use the Media reference field because it is more versatile.
  • The core Media Library module provides the media library and the Media library field widget. With this module installed, the Media library field widget becomes the default widget for editing Media reference fields.
  • The core Image module provides a user interface for defining image styles. The core Responsive Image module provides responsive image styles. Using the core Breakpoint module and a breakpoint-enabled theme, these responsive styles can serve images sized for the browser.

See the related topics listed below for specific tasks.

Additional Resources

1 - WYSIWYG View Modes

The following view modes are available for embedding media assets within a WYSIWYG editor, such as CKEditor 5. These view modes offer different display options for media assets, allowing content creators to choose the most appropriate presentation for their content.

View Modes

NameMachine nameDescription
Fullembedded_fullDisplays the media asset at its full width within the available container.
Halfembedded_halfDisplays the media asset at half its original width, typically with alignment options (left or right) to control its placement.
Linkembedded_linkDisplays a simple link to the media asset, directing the user to the original file.

Bundle Details

The display of each media asset type (Image, Video, Document) varies depending on the selected view mode. The following outlines the specific rendering for each bundle:

Image

  • Full & Half View Modes: Images are displayed using the <img> tag with appropriate CSS classes applied for styling and responsiveness. The specific classes may vary depending on the theme and styling configuration.
  • Link View Mode: A hyperlink (<a> tag) is generated, pointing to the original image file. The link includes target="_blank" to open the image in a new tab or window.

Video

  • Full & Half View Modes: Videos are displayed as embedded video players, likely using the <video> tag or an <iframe> to embed from a video hosting platform. Appropriate CSS classes are applied for styling.
  • Link View Mode: A hyperlink (<a> tag) is generated, pointing to the original video file. The link includes target="_blank" to open the video in a new tab or window.

Document

  • Full & Half View Modes: Documents are displayed using an <iframe> tag. The src attribute of the <iframe> points to a service like Google Docs Viewer, which renders the document within the iframe. Replace URL with the actual URL of the document. Appropriate CSS classes are applied for styling.

    <iframe src="//docs.google.com/gview?url=URL&embedded=true" frameborder="0"></iframe>
    
  • Link View Mode: A hyperlink (<a> tag) is generated, pointing to the original document file. The link includes target="_blank" to open the document in a new tab or window.