Image Builder

Image Builder

In this topic ...

Quick Tips
Specifying Inputs
Related Topics ...

Overview: Creating Pages
HTML Guidelines

Use the Image Builder to insert an image in an HTML page. This builder allows you to reference an image in a variety of ways. We can use absolute, direct, or indirect image references. You can also control various image attributes including the width, height, and border attributes.
The input field labeled "Alt" enables you to provide alternate text for an image that will be displayed during mouse-over.

Quick Tips

Always supply "Alt" text. In the event the image cannot be displayed, this text can provide a friendly prompt for the user.
When using a variable to store and image reference, set the Variable type to "Value" or "String."

Specifying Inputs

The Image builder takes the inputs described in the table below. For help on inputs common to many or all builders such as those in the Properties and HTML Attributes input groups, see "Using the Builder Call Editor."

Input name Description
Name Enter a name for this builder call. The designer tool displays this name in the builder call list.
Page Location Use the Page Location input to specify the page or pages on which this builder call will act. Alternatively, we can type in the page location syntax directly.
See "Locating Control Builders on Pages" for detailed documentation about the Page Location input and page location syntax.
Image Source Specify the URL to the image you want added to the page(s) in the model. An image can be specified in three ways:
Absolute: http://myworld.com/~jdoe/mypics/image1.jpg
Relative: /files/images/mypics/image1.gif
Indirect Reference: ${Variables/ImageName}
Where ImageName references a Variable containing a string value such as: /Images/myimages/image3.gif
The Indirect Reference may also be used to call a method. For example if you have a getImage method in your model we can select it using the MethodCall picker ${MethodCall/getImage}. This method must return a String that contains the image file name relative to the servable content directory e.g. /Images/myimages/image3.gif. If you are displaying rows of data using Data Page and want to vary the image based on some criteria related to the row, we can use the "xxxxLoopVar" Variable in your Method to fetch data related to the current row. The LoopVar Variable name is based on the Variable data that the Data Page Builder is operating on.
Alt This setting corresponds to the HTML image tag "alt=" attribute. Enter the text you want to appear when the mouse pointer is placed over the image or when the image cannot be displayed.
For example: This is an alt text string.
Alt text might not display correctly during a mouse-over in certain versions of Netscape Communicator.
Width This setting corresponds to the HTML image tag "width=" attribute. Enter the image width (in pixels). Your setting here will override the Browser's image sizing.
Example: 150
Height This setting corresponds to the HTML Image tag "height=" attribute. Enter the image height (in pixels). Your setting here will override the Browser's image sizing.
Example: 200
Border This setting corresponds to the HTML Image tag "border=" attribute. Enter a value between 1 and 8 to set the thickness of the line drawn around the image.
Example: 2

Input name	Description
Name	Enter a name for this builder call. The designer tool displays this name in the builder call list.
Page Location	Use the Page Location input to specify the page or pages on which this builder call will act. Alternatively, we can type in the page location syntax directly. See "Locating Control Builders on Pages" for detailed documentation about the Page Location input and page location syntax.
Image Source	Specify the URL to the image you want added to the page(s) in the model. An image can be specified in three ways: Absolute: http://myworld.com/~jdoe/mypics/image1.jpg Relative: /files/images/mypics/image1.gif Indirect Reference: ${Variables/ImageName} Where ImageName references a Variable containing a string value such as: /Images/myimages/image3.gif The Indirect Reference may also be used to call a method. For example if you have a getImage method in your model we can select it using the MethodCall picker ${MethodCall/getImage}. This method must return a String that contains the image file name relative to the servable content directory e.g. /Images/myimages/image3.gif. If you are displaying rows of data using Data Page and want to vary the image based on some criteria related to the row, we can use the "xxxxLoopVar" Variable in your Method to fetch data related to the current row. The LoopVar Variable name is based on the Variable data that the Data Page Builder is operating on.
Alt	This setting corresponds to the HTML image tag "alt=" attribute. Enter the text you want to appear when the mouse pointer is placed over the image or when the image cannot be displayed. For example: This is an alt text string. Alt text might not display correctly during a mouse-over in certain versions of Netscape Communicator.
Width	This setting corresponds to the HTML image tag "width=" attribute. Enter the image width (in pixels). Your setting here will override the Browser's image sizing. Example: 150
Height	This setting corresponds to the HTML Image tag "height=" attribute. Enter the image height (in pixels). Your setting here will override the Browser's image sizing. Example: 200
Border	This setting corresponds to the HTML Image tag "border=" attribute. Enter a value between 1 and 8 to set the thickness of the line drawn around the image. Example: 2