Including Images

Images Using Pseudo Code

Often within an article it is desired to include an image. In the old days of web development the only way to do so was to use the HTML img element... <img src="image_name.jpg" align="right" width="250px" height="250px" target="_blank" alt="My Photo">. Using this required extra lines of code to also add an image caption.

With the implementation of HTML5 a two new elements were added to better assist in the placement of images... <figure> and <figcaption>. With this addition it became much easier to include images on a webpage.

The 'foto' pseudo code

Building on the figure structure this site implements a 'foto' pseudo code to further simplify insertion of an image on a page. The <foto>border*path*align*width*name*caption</foto> pseudo code provides a structured means of entering simple code that gets expanded into the <figure> structure. The elements of the pseudo code are as follows.

Type - The type element identifies the type of border to place around the image. Three options are, photo, scan, and empty (no entry). The photo option will place a shadow box type border where the top and left borders are lighter in shade with the right and bottom borders darker in shade. The scan option places a dark shade border around the entire image. Leaving the element empty will not include a border around the image.

Path - The path element is used to indicate the path to the image (e.g., images/bok_images). Given that all images are placed in an images subfolder that begins with a three-letter identifier (i.e. bok, mis, etc.), it is permissible to just include the three-letter identifier rather than the whole path. Note that if the 'bio' identifier is used the system will also automatically include the subfolder Ltr_? identifier.

Align - The align element identifies the alignment of the image. Options are... left, center, right.

Width - The width element simply identifies the desired image width in pixels. The 'px' suffix is not required, just include the number.

Name - The name element indicates the full name of the image, which includes the image type (e.g. jpg, png, etc.). 

Caption - The caption element indicates the text of the caption that is placed below the image. The caption text is formatted with the whisper class (e.g., smaller bold text)

Additionally, the resulting code will include the alt="" text based on the image name along with the code to make the image source a link so that a larger view of the image can be seen. Also included on a hover to the image is the code to change the cursor to the spyglass icon to indicate that a larger image can be viewed.

Note: if an element is not used (e.g., type, width, etc.) make sure that the asterisks (*) are not removed. The asterisks are used to separate the parameters and should not be removed.