The Tree of Widsdom

智慧の樹

MediaFig

^do( MediaFig, filename, title, [class, href, width] )^

Type: Macro

Purpose: Embeds an image with caption

The MediaFig macro embeds an image as a semantic <figure> element whose title argument supplies the tool-tip text and the alternative text as well as a caption. The image is shadowed by default. Optional arguments are the same as for MediaImg.

  • Arg3 (class): The default classes for your image are img-responsive img-center img-well, meaning that the image will be centered, responsive, and in a well. Override this with convenience classes for image position (img-left, img-center, img-right) and size (img-large, img-medium, img-small, and img-xs). Adding any override will remove img-well effect. (Thus, to only remove the well, use a redundant img-center.) Adding img-left or img-right will invoke img-medium. Then stylize with img-well or img-shadow. Ultimate convince with minimal intervention!
  • Arg4 (href): Unless an optional 3rd argument is given, the image links to a full resolution version in another tab.
  • Arg5 (width): Optional 5th argument fixes the width.
Special feature
Go ahead and style your caption with bold, italics, and code! ^do(TbP)^ will strip out the HTML for the alt (accessibility) and title (tooltip) expressions automatically. That is to say <b>, <i>, <u>, <code>, and <kbd> will all be removed

Hover below to reveal BoxPress code

^do(_striptags, "$2")^<figure ^if($3)^class="center-block ^if($3.icontains(img-left|img-right))^img-medium ^endIf^ ^value("$3".replace("img-shadow","))^"^endIf^><a target="_blank" href=^if($4)^"$4"^else^"^root^img/$1"^endIf^><img src="^root^img/$1" alt="^value($tmpStr1(_stripnote))^" title="^value($tmpStr1(_stripnote))^" ^if($5)^width="$5"^endIf^ class="img-responsive center-block ^if($3)^^value("$3".replace("(img-left|img-right)",").replace("img-well","well well-sm"))^^else^ well well-sm^endIf^"></a><figcaption>$2</figcaption></figure>

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.