Media Extension
The media extension provides the !media markdown command for adding images and videos. As used throughout MooseDocs content, the !media command can optionally create a numbered Float Extension by specifying the "id" setting. A caption may be include by using the "caption" setting.
The configuration options for the media extension are listed in Table 1.
Table 1: Configuration options for the media extension.
| Key | Default | Description |
|---|---|---|
| prefix | Figure | The caption prefix (e.g., Fig.). |
Images
The media extension supports including the standard html image extensions: png, gif, jpg, jpeg, and svg. Images are added using the !media command followed by the filename, as shown in Example 1. Table 2 includes the list of available settings for media command for images.
The "style" setting may be used, as in the example below, to control the placement and size of the image.
Example 1: Example of the media command with an image.
!media media/inl_blue.png style=width:25%;float:right;margin-left:30px;
INL is part of the U.S. Department of Energy's complex of national laboratories. The laboratory
performs work in each of the strategic goal areas of DOE: energy, national security, science and
environment. INL is the nation's leading center for nuclear energy research and development. INL is
the nation's lead laboratory for nuclear energy research, development, demonstration and deployment
and we are engaged in the mission of ensuring the nation's energy security with safe, competitive and
sustainable energy systems and unique national and homeland security capabilities.
INL is part of the U.S. Department of Energy's complex of national laboratories. The laboratory performs work in each of the strategic goal areas of DOE: energy, national security, science and environment. INL is the nation's leading center for nuclear energy research and development. INL is the nation's lead laboratory for nuclear energy research, development, demonstration and deployment and we are engaged in the mission of ensuring the nation's energy security with safe, competitive and sustainable energy systems and unique national and homeland security capabilities.
Table 2: Settings available for images when using the media command.
| Key | Default | Description |
|---|---|---|
| caption | None | The caption to use for the media content. |
| style | The style settings that are passed to rendered HTML tag. | |
| prefix | None | The caption prefix. |
| class | The class settings to be passed to rendered HTML tag. | |
| id | The class settings to be passed to the rendered tag. |
Videos
Locally stored or hosted videos can be displayed using the !media syntax. This works in the same fashion as for images, but also includes some extra settings as listed in Table 3.
Figure 1: "Big Buck Bunny" is an open-source animated short.
Table 3: Settings available for videos when using the media command.
| Key | Default | Description |
|---|---|---|
| style | The style settings that are passed to rendered HTML tag. | |
| controls | True | Display the video player controls. |
| id | The class settings to be passed to the rendered tag. | |
| caption | None | The caption to use for the media content. |
| prefix | None | The caption prefix. |
| class | The class settings to be passed to rendered HTML tag. | |
| loop | False | Automatically loop the video. |
| autoplay | False | Automatically start playing the video. |
Float Images/Videos
As is the case for many items within the MooseDocs system (i.e., Table Extension), it is possible to create numbered images that may be referenced, as shown in Example 2. The "id" and "caption" settings are available for both images and videos.
Example 2: Example image with caption and numbered prefix.
!media media/inl_blue.png
id=inl-logo
caption=The Idaho National Laboratory logo.
style=width:50%;padding:20px;
Figure 2: The Idaho National Laboratory logo.