Gallery Extension

The gallery extension provides a mechanism for creating "cards" using the 'card' command and allow for these items to be organized in to a gallery with the 'gallery' command. The available configuration items for the extension are listed below, in Table 1.

Table 1: Configuration items for the alert extension.

KeyDefaultDescription
activeTrueToggle for disabling the extension. This only changes the initial active state, use setActive to control at runtime.

Cards

In general, a gallery is composed of cards; however, the 'card' command works as a stand alone command. The name card is derived from the materialize framework, which MOOSEDocs relies for creating website content. The settings for the card command are listed in Table 2.

Example 1: Example use of the 'card' command.

!card level_set/vortex_out.mp4 title=Vortex Benchmark style=width:50%;
The level set equation is commonly used to for interface tracking, especially when the interface
velocity is known.
Vortex Benchmarkmore_vert
Vortex Benchmarkclose

The level set equation is commonly used to for interface tracking, especially when the interface velocity is known.

Table 2: Settings for the 'card' command within the gallery extension.

KeyDefaultDescription
styleNoneThe style settings that are passed to rendered HTML tag.
classNoneThe class settings to be passed to rendered HTML tag.
idNoneThe class settings to be passed to the rendered tag.
titleNoneTitle of the card.

A gallery is simply a collection of cards, to create a gallery simply wrap the card commands with a block-level gallery command as shown below. The available settings for the gallery command are listed in Table 3.

Example 2: Example use of the 'gallery' command.

!gallery!
!card level_set/example_circle_64.mp4 title=Translation

!card level_set/circle_rotate_master_out.mp4 title=Rotation

!card level_set/vortex_out.mp4 title=Vortex
!gallery-end!
Translation
Rotation
Vortex

Table 3: Settings for the 'gallery' command within the gallery extension.

KeyDefaultDescription
styleNoneThe style settings that are passed to rendered HTML tag.
classNoneThe class settings to be passed to rendered HTML tag.
idNoneThe class settings to be passed to the rendered tag.
large4Number of columns on large screens (1-12).
medium6Number of columns on medium screens (1-12).
small12Number of columns on small screens (1-12).