# Image Rendering Reference

## Navigation:

Index General Information Elements Utils Examples

# General

The image rendering process is based on XSL (EXtensible Stylesheet Language) templates.
The template is used to specify the fields, which should be rendered into the image.
The individual image for the label is then generated by applying the template to a XML, which is based on the properties of the label and is expanded by a custom XML from the user.

The following steps are executed when processing a template:

1. Generating a record XML based on the label/task information and custom information provided by the user
2. Applying the template (XSL) on the generated record XML. This results in a document containing the fields, specified in this reference and values referenced from the XML
3. Rendering the image based on the previous output

## XSL Template

The XSL template will be applied to the XML record. After applying the template, a source for generating the image will be created.
A template usually should have the following structure (example):

## Template Example

`<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xsd="http://www.w3.org/2001/XMLSchema" version="1.0">
<xsl:template match="Record">
Space for field definitions and XML record data referencing
</xsl:template>
</xsl:stylesheet>
`

## Record XML

A record XML is automatically generated before the image is rendered. The XML has the following structure:

## Record Example

`<?xml version="1.0" encoding="UTF-8"?>
<Record>
<Label>
<Id>B1000000</Id>
<LabelType>iMAGOTAG 2.7</LabelType>
<DisplayHeight>176</DisplayHeight>
<DisplayWidth>264</DisplayWidth>
</Label>
<Task>
<CurrentDate>11.09.2012</CurrentDate>
<CurrentTime>15:13:53</CurrentTime>
<ExternalId>0</ExternalId>
<Page>0</Page>
</Task>
</Record>
`
The XML specified by the user gets appended after the "Task" element.
This means every field this XML can be referenced in the XSL template using e.g. `<xsl:value select="Label/Id"/>`, references the ID of the label.

## Utils

The template utils are methods provided by iMAGOTAG to manipulate text content for the generated image. See the utils section for detailed information about the different supported methods, their parameters and their outputs.

In order to call such a method it has to be defined in the template:

## Utils Example

`<utils method="toUpperCase">text</utils>`

The result of this example would be, that the generated image will output "TEXT" instead of "text".

In case that the method takes multiple parameters, they have to be defined as attribute in the utils tag.

## Utils Example with multiple arguments

`<utils method="replace" arg1="x" arg2="s">text</utils>`

The output for this method will be "test" instead of "text".

## CSS Support

The templates support the import of one or more CSS files in order to specify the attributes of the different fields. Each tag, except the root image tag, supports the HTML like attributes "id" and "class", to reference from the CSS file.

The engine supports the definition of CSS1. The attributes used in the CSS file have the same identifier as the attributes in the template (e.g. in template: font-size="12", in css: font-size: 12;)

In order to import a CSS file, a <css> tag and the "href" attribute have to be defined inside the root image tag. The "href" attribte specifies the relative path to the css file from the template file.

For usage see the CSS Example and the referenced CSS file