Gallery Extension

The gallery extension provides a mechanism for creating "cards" using the !card command and allows for these items to be organized into 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.

Key	Default	Description
active	True	Toggle 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 on for creating website content. The settings for the card command are listed in Table 2.

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

Markdown
HTML

!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 Benchmark

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.

Key	Default	Description
style	None	The style settings that are passed to rendered HTML tag.
class	None	The class settings to be passed to rendered HTML tag.
id	None	Identifier to link against this object.
title	None	Title of the card.

Gallery

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.

Markdown
HTML

!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.

Key	Default	Description
style	None	The style settings that are passed to rendered HTML tag.
class	None	The class settings to be passed to rendered HTML tag.
id	None	Identifier to link against this object.
large	4	Number of columns on large screens (1-12).
medium	6	Number of columns on medium screens (1-12).
small	12	Number of columns on small screens (1-12).

Cards
Gallery