In BoxPress, you include images in your text-flow elegantly—by naming them in a macro.  The macro for basic image export is MediaImg. It requires two args: the filename and the title. The title will only appear on hover and as alternate text for non-imaging browsers.

Images are automatically centered, responsive, in a well, and include both alt and title. Just add an optional 3rd arg to change size and/or position (doing so also removes the well). Images are automatically links to themselves as full-page views. Just add an optional 4th arg to link it elsewhere.

To export the image with a caption, use MediaFig.

Let me demonstrate. I will now embed a centered and responsive image in this midst of my writing. I will do so by typing the following text:

^do(MediaImg, "tesseract.gif", "Contemplating the very notion of a three-dimensional shadow is never a waste of time!")^

In Tinderbox, text that starts and ends with carets (^) is called export code. To embed a macro, you use the ^do()^ export code. I will now type the above macro as my next paragraph:

You should see an image above. It’s that easy!

To embed an image with a caption, all I need to do is type this:

^do(MediaFig, "tesseract.gif", "Now I have a caption!")^

Which I will do right now:

That is, by using MediaFig rather than MediaImg, a caption was added.

BoxPress includes convenience classes for position, size, well, and shadow. 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 simply remove the well, use a redundant img-center.) Ultimate convince with minimal intervention!

To activate a class, just include it as a third argument:

Notice that the well has been removed

^do(MediaFig, "tesseract.gif", "Adding a class removes my well.", "img-small")^

Note that to only remove the well from the default style, just add img-center:

My only difference from pure default is well removal

^do(MediaFig, "tesseract.gif", "Adding any class removes my well. Since I am already centered, adding img-center only removes my well.", "img-center")^

Doing this does nothing but remove the well since the image is centered by default anyway.

To pull the image to the left or right margin and have the text wrap around it, add img-left or img-right to your third argument. Size and position classes combine nicely:

Notice that the well is back

^do(MediaImg, "tesseract.gif", "Words to live by!", "img-small img-left img-well")^

Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping.

To use a shadow instead of a well, add it to your argument:

Now with shadow

^do(MediaFig, "tesseract.gif", "Words to live by!", "img-small img-right img-shadow")^

Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping.

If you use only img-left or img-right, then img-medium is added to allow wrapping on all devices. You can override with img-large if you really want to.

Now with shadow

^do(MediaFig, "tesseract.gif", "Words to live by!", "img-right")^

Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping. Here is some sample text to demonstrate wrapping.

There is an export option related to basic links: NOIMAGE.

For the full listing of media macros, see here.