This page describes how to mark up images in ESP.
Decide on a width for standard-size images and stick to it. (The images on the Knowledge & Power site are 9cm in width but have varying heights.)
If large images are required, create a link to a larger version from the standard-sized image. Choose sizes for large images according to how much detail is required, but remember to keep the file size as small as possible.
Follow the Style Guide when selecting images, writing captions and citing image sources.
Images need to be optimised correctly for use on the web. Please use the following guidelines:
Store all images for use on the site in your project's
00res/images folder, or in subfolders inside it. To organise your images, consider creating subfolders with the same hierarchy as your site's navigational structure.
By default, the processor will look for the images in the
00res/images folder. The
file attribute within
<esp:image> specifies the location of the image relative to the
.../images folder. So for an image entitled
esarhaddon.jpg located in the folder
file attribute should read:
Do not include a leading forward slash when specifying the image location (i.e., do not do this:
file="/contexts/esarhaddon.jpg") or the image and its caption will not float correctly.
The specification for how to use the
<esp:image> element is given below:
<esp:image file="example.jpg" description="Example image" position="float" or position="inline" (default) > <esp:link url="blah"> (optional) <esp:caption>Here is a caption.</esp:caption> </esp:image>
00res/imagesfolder. Image files must be JPG or GIF format.
float, which causes the image to appear on the right and text to flow around it, or
inline(the default), which causes the image to break up the text above and below it. (The images for the Knowledge & Power site are all aligned to the right using the
<esp:image> element can contain a
<esp:caption> element, which will display caption text underneath the image. The caption can contain links, e.g., to a large version of the image, as described in the section on Links within image captions.
It is possible to create a link to a large version of an image using a relative URL. This linked image will appear as a standalone entity, rather than within a page.
<esp:image> tag can be utilised to include images hosted on other websites, using the
url attribute instead of the
<esp:image url="http://www.example.com/example.jpg" description="Example image" position="left" or position="right" or position="inline" (default) > Example image caption (optional) </esp:image>
leftwhich causes the image to appear on the right/left and text to flow around it, or
inline(the default), which causes the image to break up the text above and below it. The value
rightreplaces the old value
floatand gives the same effect.
The element may contain zero or one empty
<esp:link> tags, which will end up placed around the image itself. If there is no
<esp:link> tag, it may contain zero or one
ESP no longer supports image maps as they are very difficult to scale to fit small screens on hand-held devices. Emailto discuss alternatives.
Once you have some textual and image content you are ready to check and (re)build your ESP website if you are an ESP site manager. If you are creating ESP content for someone else, ask them to check and upload it for you.23 Jul 2014
Ruth Horry & Eleanor Robson
Ruth Horry & Eleanor Robson, 'Images in ESP', Oracc: The Open Richly Annotated Cuneiform Corpus, Oracc, 2014 [http://oracc.museum.upenn.edu/doc/help/portals/images/]