The Tree of Widsdom

智慧の樹

Sampler: Macros for media


Table of Contents

ImgHere sample

This is the markup that is rendered below

Place this agent at the top of container and toggle its export to OFF (^do(ImgHere, "glyph_label_red.png", "label red")^) using the ⬍ HTMLDontExport stamp.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Place this agent at the top of container and toggle its export to OFF (label red) using the ⬍ HTMLDontExport stamp. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

MediaAudio sample

This is the markup that is rendered below

^do(MediaAudio, "Shivaya-deep.mp3")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MediaFig sample

This is the markup that is rendered below

^do(MediaFig, "sample.jpg", "Unlike MediaImg, MediaFig is a semantic <figure> element, and also includes a (mandatory) caption underneath the image.")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Unlike MediaImg, MediaFig is a semantic <figure> element, and also includes a (mandatory) caption underneath the image.
Unlike MediaImg, MediaFig is a semantic <figure> element, and also includes a (mandatory) caption underneath the image.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MediaFigLR sample

This is the markup that is rendered below

^do(MediaFigLR, "sample.jpg", "sample_hover.jpg", "The lefthand image becomes the righthand image.")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Before
Transformation
After
The lefthand image becomes the righthand image.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MediaFigTog sample

This is the markup that is rendered below

^do(MediaFigTog, "sample.jpg", "sample_hover.jpg", "HOVER over the image above to toggle its content!")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HOVER over the image above to toggle its content!
HOVER over the image above to toggle its content!

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HOVER over the image above to toggle its content!
HOVER over the image above to toggle its content!

MediaImg sample

This is the markup that is rendered below

^do(MediaImg, "sample.jpg", "I’ve included some text here for alt and title, but it’s optional. You’ll see this text as a tooltip.")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

I’ve included some text here for alt and title, but it’s optional. You’ll see this text as a tooltip.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MediaImgTog sample

This is the markup that is rendered below

^do(MediaImgTog, "sample.jpg", "sample_hover.jpg", "I’ve included some text here for alt and title, but it’s optional. You’ll see this text as a tooltip.")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

I’ve included some text here for alt and title, but it’s optional. You’ll see this text as a tooltip.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MediaThumbs sample

This makes thumbnails two-across the container for all widths.

^do(MediaThumbs, "col-xs-6", "
sf_Craft.png	The Craft segment
sf_Health.png	The Health segment
sf_Magic.png	The Magic segment
sf_Safety.png	The Safety segment")^

This makes thumbnails two-across the container for all widths under medium (992px), and four-across when the container gets wider than this.

^do(MediaThumbs, "col-xs-6 col-md-3", "
sf_Craft.png	The Craft segment
sf_Health.png	The Health segment
sf_Magic.png	The Magic segment
sf_Safety.png	The Safety segment")^

This makes thumbnails two-across when > xs, three-across when > sm (768px), four-across when > md (992px), and finally six-across when > lg (1200px).

^do(MediaThumbs, "col-xs-6 col-sm-4 col-md-3 col-lg-2", "
aurora_dracula.jpg	Dracula.
aurora_frankenstein.jpg	Frankenstein.
aurora_godzilla.jpg	Godzilla.
aurora_hunchback.jpg	Quasimodo.
aurora_hyde.jpg	Dr. Jekyll as Mr. Hyde.
aurora_kong.jpg	King Kong.
aurora_phantom.jpg	Phantom of the Opera.
aurora_prisoner.jpg	King Kong.
aurora_wolfman.jpg	Wolfman.")^

MediaThumbsCap sample

This makes thumbnails two-across the container for all widths.

^do(MediaThumbsCap, "col-xs-6", "
sf_Craft.png	The Craft segment
sf_Health.png	The Health segment
sf_Magic.png	The Magic segment
sf_Safety.png	The Safety segment")^

This makes thumbnails two-across the container for all widths under medium (992px), and four-across when the container gets wider than this.

^do(MediaThumbsCap, "col-xs-6 col-md-3", "
sf_Craft.png	The Craft segment
sf_Health.png	The Health segment
sf_Magic.png	The Magic segment
sf_Safety.png	The Safety segment")^

This makes thumbnails two-across when > xs, three-across when > sm (768px), four-across when > md (992px), and finally six-across when > lg (1200px).

^do(MediaThumbsCap, "col-xs-6 col-sm-4 col-md-3 col-lg-2", "
aurora_dracula.jpg	Dracula.
aurora_frankenstein.jpg	Frankenstein.
aurora_godzilla.jpg	Godzilla.
aurora_hunchback.jpg	Quasimodo.
aurora_kong.jpg	King Kong.
aurora_phantom.jpg	Phantom of the Opera.
aurora_prisoner.jpg	King Kong.
aurora_wolfman.jpg	Wolfman.
aurora_hyde.jpg	Dr. Jekyll as Mr. Hyde.")^

MediaTube sample

This is the markup that is rendered below

^do(MediaTube, "https://www.youtube.com/embed/KPZ8HHRR1A0")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MediaTube16 sample

This is the markup that is rendered below

^do(MediaTube16, "https://www.youtube.com/embed/MUP1r7OQNA0")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MediaTubeSmall sample

This is the markup that is rendered below

^do(MediaTubeSmall, "https://www.youtube.com/embed/KPZ8HHRR1A0")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MediaVid sample

This is the markup that is rendered below

^do(MediaVid, "Candle-Cove-s01e12.mp4")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MediaVid16 sample

This is the markup that is rendered below

^do(MediaVid16, "premium_packages.mov")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MediaWin sample

This is the markup that is rendered below

^do(MediaWin, "bp_view_topnote_out.png", "Unlike MediaImg and MediaFig, MediaWin adjusts the margin to absorb the shadow the comes with window screenshot grabs.")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Unlike <b>MediaImg</b> and <b>MediaFig</b>, <b>MediaWin</b> adjusts the margin to absorb the shadow that comes with window screenshot grabs.
Unlike MediaImg and MediaFig, MediaWin adjusts the margin to absorb the shadow that comes with window screenshot grabs.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MediaWinTog sample

This is the markup that is rendered below

^do(MediaWinTog, "bp_view_topnote_out.png", "bp_view_topnote_map.png", "HOVER over the image above and toggle its content.")^

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HOVER over the image above and toggle its content.
HOVER over the image above and toggle its content.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.