TypeMetal

Adding Images and Figures

Images

To add an image (<img> element) to an HTML document:

Either way, this results in a new <img> element in your document, that references the given image file. Using the attribute editor for the <img> element, you can then:

Figures

HTML 5 introduces the <figure> element, which provides for an image, diagram, illustration, or other such content to be annotated with a caption. The picture content of a <figure> is often provided by an <img>, though it isn’t required to be.

Typical usage looks like this:

<figure>
    <img src="lake-sunset.jpg" alt="a picture of the lake, taken from our cabin" />
    <figcaption>Sunset at The Lake</figcaption>
</figure>

TypeMetal provides a little extra assistance to make HTML 5 figures easier to create.

You can wrap a <figure> around an existing <img> element (or other valid <figure> content), by selecting the <img> and then requesting a <figure> using the usual “Insert or Wrap In…” or completion mechanism. TypeMetal automatically adds a <figcaption> to the <figure> element, whose placeholder caption text you can edit.

When you ask it to insert a <figure> element at an insertion point (instead of wrapping around a selection), TypeMetal drops a sheet prompting you to choose an image file for the <figure> to contain. If you choose an image file and click the “Open” button, TypeMetal inserts an <img> wrapped in a <figure> that has a placeholder caption, similar to the usage example above. (The caption text might not be visible until after you dismiss the attribute editor that TypeMetal automatically opens for the <img>.) To edit the caption, just double-click to select it, and type the caption text you want.

In rarer cases where you want a <figure> whose content isn’t an <img>, you can click “Cancel” in the image file selection sheet (or press Esc). TypeMetal then inserts a <figure> that contains only a <figcaption>. You’ll probably find Block Mode useful, to help you position the insertion point within the <figure> and before the <figcaption>, so you can insert whatever element will provide the figure’s illustration content.