Figure Management

Summary

Purpose

When writing technical documents in the sciences and engineering, it is customary to include captions with any included images. Each caption is grouped with its corresponding image by using the HTML figure tag. By convention in scientific writing, the caption is placed under the image. An example of the resulting HTML code is shown in Listing 1.

<figure>
    <img src="/path/to/image.png" alt="image alternate text">

    <figcaption>
        Caption text describing the image.
    </figcaption>
</figure>

Since a scientific or engineering site could contain a lot of figures, including them results in quite a bit of repetition for the author. The figure, figcaption, and img tags all have to be repeated for each figure. Furthermore, the author has to remember to put the caption under the figure, since placing the figcaption tag before the img tag would result in the caption appearing above the image.

To simplify things for authors, it would be nice to have a ts-figure tag to reduce the repetition. The example from Listing 1 could be shortened to the HTML code shown in Listing 2.

<ts-figure src="/path/to/image.png" alt="image alternate text">
    Caption text describing the image.
</ts-figure>

Scope of Work

Extend TealSite to implement the ts-figure tag to reduce repetition when adding figures to a site. Design and add support for additional attributes to improve integration onto a page. Check that the figure alternate text is set either by the alt attribute or by a sidecar file included with the image file. Ensure that the caption is not empty.