# Zimbra Image Builder

The Zimbra AJAX library has a concept of high resolution and low resolution images. High resolution means that the images are delivered from the server to the client image by image, in their original form. Low resolution means that all images are combined into one big image, and each individual image is referenced by bit offsets within the large image. To support this concept, the AJAX Toolkit Framework has implemented image builder functionality for the Zimbra personality. Every time an image (gif, jpeg, png) is created or copied into a Zimbra project, the image builder processes the image to support high and low resolution. What does the processing consist of? See below.

### High Resolution Image Processing

For high resolution processing, the framework simply creates a CSS reference to the image file, and a JavaScript variable to represent it. Under the target Zimbra project, you will find a WebContent/zimbraAjax/imgs/webmodule/hiRes directory. In that directory you will find a imgs.css and ExImg.js file. These files contain the high resolution CSS class and JavaScript variable, respectively, for a particular image. Among other things, the CSS class contains the location of the image within the Zimbra project. The JavaScript variable references the CSS class that specifies the location of the image. To use the image in the context of Zimbra JavaScript development, simply include both the CSS (imgs.css) and JavaScript (ExImg.js) files in the Zimbra control file (i.e. html or jsp file), and reference the image by the JavaScript variable in the ExImg.js file. Below is an example of including the high resolution CSS and JavaScript files in an HTML control file.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert Title Here</title>

    <style type="text/css">
    <!--
    @import url(/z1/zimbraAjax/imgs/webmodule/hiRes/imgs.css);
    -->
    </style>

    <script type="text/javascript" src="/z1/zimbraAjax/imgs/webmodule/hiRes/ExImg.js"/>

    <body>
    	//Content Here
    </body>
    </html>

### Low Resolution Image Processing

For low resolution processing, the framework will add the image to the image composite located under the WebContent/zimbraAjax/imgs/webmodule/loRes directory. For each image type (gif, jpeg, png) that exists in the project, there will be an imgs.[gif | jpeg | png] file that is a composite of all image files of that type in the project. The imgs.css file will still contain a CSS class corresponding to each image, but the location of each image is now the composite image with a bit offset within the composite. The JavaScript file, ExImg.js, contains a variable for each image which references the corresponding image CSS class. To use the image in the context of Zimbra JavsScript development, simply include both the CSS (imgs.css) and JavaScript (ExImg.js) files in the Zimbra control file (i.e. html or jsp file), and reference the image by the corresponding JavaScript variable in the ExImg.js file. Below is an example of including the low resolution CSS and JavaScript files in an HTML control file.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert Title Here</title>
    <style type="text/css">
    <!--
    @import url(/z1/zimbraAjax/imgs/webmodule/loRes/imgs.css);
    -->
    </style>
    <script type="text/javascript" src="/z1/zimbraAjax/imgs/webmodule/loRes/ExImg.js"/>
    <body>

    </body>
    </html>

Related tasks
Creating a Zimbra Application

(C) Copyright 2006, 2007 IBM Corporation and others. All Rights Reserved.