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 |
|---|---|---|
| active | True | Toggle for disabling the extension. This only changes the initial active state, use setActive to control at runtime. |
| 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 |
|---|---|---|
| style | The style settings that are passed to rendered HTML tag. | |
| class | The class settings to be passed to rendered HTML tag. | |
| id | The class settings to be passed to the rendered tag. | |
| latex_src | None | Image to utilize when rendering with LaTeX |
| caption | None | The caption text for the float object. |
| prefix | None | The numbered caption label to include prior to the caption text. |
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. | |
| class | The class settings to be passed to rendered HTML tag. | |
| id | The class settings to be passed to the rendered tag. | |
| latex_src | None | Image to utilize when rendering with LaTeX |
| controls | True | Display the video player controls. |
| loop | False | Automatically loop the video. |
| autoplay | False | Automatically start playing the video. |
| tstart | None | Time (sec) to start video. |
| tstop | None | Time (sec) to stop video. |
| caption | None | The caption text for the float object. |
| prefix | None | The numbered caption label to include prior to the caption text. |
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.