4.8 :: Images

Description

While <easyExternalImage> will get you started with an image, if you need more control over where your image is positioned and formatting, use the <externalImage> element.

Quick Example

Attributes

class

Specify a class for your image so that you can use a style sheet to change the way it looks.

Example:

<externalImage class="myClass">

    <url>http://your-domain.com/img/logo.png</url>

</externalImage>

filetype

Specify the original filetype type of image you are wish to display, png for png's, jpg for jpg's! The appropriate file format will be selected for the device.

Example:

<externalImage filetype="png">

    <url>http://your-domain.com/img/logo.png</url>

</externalImage>

scale

What percentage size of the screen do you want your image to be? The value should be from 1 to 100 - you don't need to worry about the actual screen size, we'll do that for you! If you don't want the image to be resized, simply set scale to 0.

Example:

<externalImage scale="95" filetype="png">

    <url>http://your-domain.com/img/logo.png</url>

</externalImage>

quality

Specify a percentage value from 1 to 100 defining the quality of the image you want to display, the higher the better quality but remember that the higher the value, the bigger the image size. We recommend around 80 - 100, but less than 100 for jpg's!

Example:

<externalImage quality="90" filetype="png">

    <url>http://your-domain.com/img/logo.png</url>

</externalImage>

Child Elements

url

The URL of the image you want to display including the full path and domain name.

Example:

<externalImage filetype="png">

    <url>http://your-domain.com/img/logo.png</url>

</externalImage>

alt

The alt tag that you would like included for the image.

Example:

<externalImage scale="95" filetype="png">

    <url>http://your-domain.com/img/logo.png</url>

    <alt>Your Alt Text</alt>

</externalImage>

transcol

The colour you want to set as the background for your image.

Example:

<externalImage filetype="png">

    <url>http://your-domain.com/img/logo.png</url>

    <transcol>ff0000</transcol>

</externalImage>

safe_width

If set to 1, the image will be resized so that the width of the entire page never exceeds 100% of the scren width. If set to 0, the scale attribute will be used without regard for the rest of the page. Note that if you set this to 0, you should make sure your "scale" is set to an appropriate value. (Default: 1)

Example:

<externalImage alt="My Logo" scale="70" filetype="png">

    <url>http://your-domain.com/img/logo.png</url>

    <safe_width>0</safe_width>

</externalImage>

border_styles

By default, images return back to you with a style of "border:none" applied to them. By setting <border_styles> to 0, you can turn this off so you can control the style yourself.

Example:

<externalImage alt="My Logo" scale="70" filetype="png">

    <url>http://your-domain.com/img/logo.png</url>

    <border_styles>0</border_styles>

</externalImage>

Detailed Example

Additional Examples

How to use an image for a link

Specify an image to place in the link instead of text. The format for specifying an image inside a link is the same as the externalImage element. For more information about this, please see the <externalImage> element.

Example:

<externalLink>

    <externalImage scale="10" filetype="png" quality="90" do_cache="0" class="linkImage">

        <url>http://wapl.info/img/header_wapple.png</url>

    </externalImage>

</externalLink>