Each form page displays all the catalog entries for archived photos that use the same English name.
Because there may be hundreds of form pages, they reside
in subdirectory “
form/” under the directory where the index page lives.
The name of each form file will be derived from the
“bird ID” string corresponding to that
name. In most cases, this will be just the six-letter
bird code. For example, the page for American Robin will
live at “
There are two complications, however. Each possible
compound (hybrid or species-pair) form will have its own
page. The name of this page will be based on the
composite bird code (e.g., “
mallar^amewig?”). However, as this
example shows, the special characters used in composite
bird codes (
^|?) have special meanings in
Unix shells. So these three characters are translated
according to this table:
Here are some examples:
|English name||Code||File name|
|Wigeon, American×Wigeon, European||
|Flycatcher, Dusky/Flycatcher, Hammond's||
The bulk of the form page is one large table with three columns:
The thumbnail image.
The image size, as a percentage of a 24mm×36mm frame.
The rest of the width of the table consists of a
vertical stack of boxes. The first box contains the
catalog number (whose first 10 digits are also the
date), the state, and the locality. At this writing,
note element will be shown in
the next box. Eventually the other elements such as
film will get
their own boxes.
Here is a mockup showing the table and one entry.
<table border='4' cellspacing='4'> <colgroup> <col align='center'/> <col align='right' valign='top'/> <col align='left' valign='top'/> </colgroup> <thead> <tr> <th align='center'>Thumbnail</td> <th align='center'>Size</td> <th align='center'>Data</td> </tr> </thead> <tbody>
Here is the first column of a sample table row. Note the
attributes. Even though they are the same values from
colgroup header, they are repeated
here because some contemporary browsers do not properly
<tr> <td valign='top' align='center'> <img src='../thumb/2005-02-18a0005.jpg' alt='thumbnail'/> </td>
The second column displays the image size in two ways: as
a percentage of full frame, and using its pixel
dimensions. Because the “Size” column has
very little information in it, we want to keep that
column narrow by stacking these three numbers vertically,
div elements. The
×” character is
the multiplication symbol “×”.
<td valign='top' align='right'> <div>26.37%</div> <div>2018</div> <div>×2796</div> </td>
The third column contains all the other data. Paragraphs
are vertically stacked using
<td valign='top' class='cat-info'> <div class='ident'> <span class='cat-no'>2005-02-18a0005</span> NM: Bosque del Apache NWR </div> <div> <!--Minor data--> taking off, wings up, !! </div> </td> </tr> </tbody> </table>
Note the links to CSS rules:
The box containing the catalog number and location.
Highlights the catalog number.
Formats the information block.
See Section 5, “Styling with CSS” for the corresponding CSS rules.