Adding Images and Figures
To add an image (
<img> element) to an HTML document:
- Drag and drop an image file into the document, or
- Insert an
<img>element into the document, using the usual completion mechanism for inserting elements. TypeMetal will prompt you to choose the image file you want it to reference.
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:
- Move or copy the original image file elsewhere (perhaps filing it in a folder where you keep other images for the same page or website)
- Resample the original image (usually to create a smaller version that’s more suitable for use in a Web page)
- Re-save the original image as a file of another type (making a .jpg file from a .png file, for example)
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.