THL Toolbox > Developers' Zone > XML Markup in THL > Images in XML Essays

Images in XML Essays

Contributor(s): Than Grove

In THL XML essays, the markup of images uses the <figure> element in TEI. The simplest figure tag is an empty tag that has two attributes, an "entity" attribute and a "rend" attribute. The entity attribute contains the name of an image entity declared at the top of the document and the rend attribute contains a predefined value for the alignment of the image. The rend attribute is actually optional and default to right justification of the image. The rend attribute can have the following values:

• left (float left allowing text to appear to the right of the image)
• center (center the image in its own block, no text to either side)
• right (float right allowing text to appear to the right of the image)
• block (align left taking up the whole width of the article and not allowing text to appear to the right of the image)
• noshadow (also align left as "block" but without the custom drop shadow styling)
• inline (an inline image, usually smaller in size)

The simplest figure tag would thus look like this:

<figure entity="img07b" rend="right"/>

Where the entity "img07b" is defined at the top of the document as:

<!ENTITY img07b SYSTEM "http://www.thlib.org/static/reprints/jiats/04/images/jiats04fox-img07b-sm.jpg" NDATA JPG>

Captions

To include captions for an image, the <figDesc> child is included within the <figure> tag with the text of the caption inside it. This <figDesc> element can contain internal markup, plain text, or a combination of both. Thus, for an image with a caption the markup would look like:

<figure entity="img01" rend="block">
    <figDesc>Figure 1. Nomad herder’s camp at about five-thousand meters elevation in the northern
        <geogName type="lake"><name type="lake" corresp="entry19" lang="tib" n="Aru">a ru</name> <geog>Basin</geog></geogName>, 
        <placeName corresp="entry11" lang="eng">Rutok County</placeName>, 
        <placeName corresp="entry13" lang="eng">Ngari Prefecture</placeName>, 
        within the <placeName><geogName corresp="entry1" lang="tib" n="Jangtang">byang thang</geogName> 
        Nature Reserve</placeName> on the western <geogName>Tibetan Plateau</geogName>. 
        Photo: Joseph Fox
    </figDesc>
</figure>

Note: For side-by-side images (see below) with a single caption, the <figDesc> element should be given a rend="fullwidth".

More than one image side by side

When one wants to place two or more images side by side in a row, special mark-up is required. One needs to place the individual figure tags within an <p> element whose rend attribute is set to "imgs". To ensure the proper positioning of two images, the first figure is given a rend="left" and the second rend="right". As mentioned above, when there is a single caption for both images the <figDesc> element is given a rend="fullwidth". Thus, the markup of such a situation is exemplified by:

<p rend="imgs">
    <figure entity="img06a" rend="left">
        <figDesc rend="fullwidth">Figure 6. Fencing constructed in 2005 to delineate herding group grazing
           boundaries at around 4,800-meter elevation in the northernmost inhabited areas of
           <placeName corresp="entry15" lang="eng">Drakpo Township</placeName>, 
           <placeName corresp="entry5" lang="eng">Gertsé County</placeName>, 
           <placeName corresp="entry13" lang="eng">Ngari Prefecture</placeName>, within
           the <placeName><geogName corresp="entry1" lang="tib" n="Jangtang">byang thang</geogName>
           Nature Reserve</placeName>. Photos: Joseph Fox
        </figDesc>
    </figure>
    <figure entity="img06b" rend="right"/>
 </p>

Small Versus Large Images

The normal display mode for images is to present a smaller version of the image within the body of the essay that itself is clickable. Clicking on one of these smaller images produces a popup window displaying a larger version of the image. This mechanism is automatically invoked base on the filename of the image declared in the entity definition at the top of the document. In the example above, the filename within the entity is:

… SYSTEM "http://www.thlib.org/static/reprints/jiats/04/images/jiats04fox-img07b-sm.jpg" …

The "-sm" suffix to this file name "jiats04fox-img07b-sm.jpg" indicates that it is a smaller version and invokes the code to create the popup. For maps, charts, and so forth that should be readable within the text itself without requiring a popup, one simply does not include the "-sm" within the name of the file and uses a URL that points to a large version of the image. The markup of the image and its caption is the same as described above, but the lack of the "-sm" suffix to the file name prevents the popup from being invoked.

Provided for unrestricted use by the Tibetan and Himalayan Library