Image files

These files define the image ids and their associated files.

It is possible to specify more than one image resource in one XML file, for example:

   <images>
     <image id="image1" url="hand.png" />
     <image id="image2" url="crocodile.png" />
   </images>

The URL is relative to the XML file. Note that there can be as many of these files as you want.

Grammar

See the image definitions Schema.

An image definition has the following attributes:

• "id" : the id of the image, which will be used in the img element
• "url" : the id of the image, which is its path relative to the image definition file
• "transparent" (optional): true if the image should have a transparent background
• "transparentColor" (optional): specifies the color to put as transparent (useful only if the "transparent" attribute is true). If this attribute is not present, the white color will be used for the transparency
• "desc" (optional): not used in the generation, allows to add a deescription to the image resource
• "width" (optional): the default image width: can be specified in pixels or in % of the HTML page width
• "height" (optional): the default image height: can be specified in pixels or in % of the HTML page width
• "margin" (optional): the property specifying the margin around the images using this definition. See also image margins for more information

Constraints on image ids

The ids of images must not have one the following pattern because these ids are used internally for images generated by the generator:

• __[^_].+__\d*

For example, the following definitions are allowed:

   <images>
     <image id="image1" url="hand.png" />
     <image id="_image2_" url="crocodile.png" />
     <image id="____image3_" url="crocodile.png" />
   </images>

But the following definitions are not allowed:

   <images>
     <image id="__image1__" url="hand.png" />
     <image id="__image2__3" url="crocodile.png" />
   </images>

Note that the generator will emit an error if an image is considered as not allowed, but will not prevent the generation. In some cases however, it could lead to problems^[1]

for example, if you use the same image name as a messageBox image for a default type)

Specifying the default size of the image

By default width and height of the image can be specified. The following attributes allow to specify the width or height of the image.

• "width": The optional image width: can be specified in pixels or in % of the HTML page width
• "height": The optional image height: can be specified in pixels or in % of the HTML page width

If one of these attributes is present, img elements which use this image definition and don't have any width or height attribute will use the width and height of this image definition.

Example

Suppose that we have the following definition:

   <images>
     <image id="image1" url="hand.png" width="30%" />
     <image id="image2" url="crocodile.png" width="100px" />
   </images>

And the following content in an article:

   <img id="image1" />
   <img id="image1" width="50%" />

This will be equivalent to:

   <img id="image1" width="30%"/>
   <img id="image1" width="50%" />

Supported file formats

All the file formats supported in the html img element are supported. For example:

• gif files
• png files
• jpg files
• svg files. Note that SVG support depends on the browser

The file format will be detected by the file extension.

Example

   <image id="image1" url="hand.png" />

You can use this image for example for an article in an img element:

   <article desc="article1">
     <img id="image1" width="20%" />
   </article>

Adding categories

It is possible to group some images in categories to make it easier to understand the content of the definition. Noter that this grouping is not used in the parsing and is only useful for the reader understanding.

For example:

   <images>
      <image id="image1" url="ball.jpg" desc="the image"/>
      <category desc="the category" >
         <image id="image2" url="ball_1.jpg"/>
         <image id="image3" url="ball_2.jpg" desc="the image 3"/>
      </category>
   </images>