Key Information

When you are using a skin remember that the skin replaces all the HTML templates in your project with the versions in the skin. If you want to add graphic references to the template you must do this in the skin, not in your project.

Graphics types:

You can use any image types supported in HTML pages. This will generally be JPG, GIF and PNG images.

Referencing graphics stored in your project folder and search path:

Graphics files stored in your project folder and in folders listed in your project search path can be referenced in the supported tags (see below) without any path information, like this:

<img src="logo23.jpg" width="200" height="42" />

The files will be located and exported with your published output automatically.

Referencing graphics with other tags:

If you use other tags to reference your graphics you must add the graphics to your Baggage Files or copy them to your output folder manually to ensure that they are exported (see below).

Referencing graphics stored in other locations:

If your graphics files are stored elsewhere you must include an absolute or relative path to the current location of the graphics files in your template code. Here too, this feature is only supported for certain tags (see further below on this page for details). For example:

<img src="../source files/graphics/logo23.jpg" width="200" height="42" />

If you use absolute paths it is advisable to use UNC path syntax, for example:

<img src="\\?\C:\Users\Robert\Desktop\Source Images\image7.jpg" />
<img src="\\MainServer\HelpStuff\Graphics\image10.jpg" />

When you publish Help & Manual will locate the files using the path you enter and then strip the path in the published files and export the files with your output. The resulting code in the three examples above would look like this:

<img src="logo23.jpg" width="200" height="42" />
<img src="image7.jpg" />
<img src="\image10.jpg" />

Where to store your source graphics files:

If you store the referenced external graphic files in the project directory (i.e. in the same directory as the .hmxz or .hmxp project file) or reference the files with paths to their location at publish time in your code they will be exported automatically. Alternatively you can add the files to your project's Baggage Files – see below for instructions.

Images referenced in your templates and stored in your project folder will only be found and exported automatically when they are referenced in the HTML tags listed below.

All other image tags and attributes are ignored. If you reference graphics in your templates in any other way you should add the images to the Baggage Files (see below) or copy them to your output folder manually to ensure that they will be exported. This also includes the variant images for mouseover buttons as they are not referenced with the tags listed above!

The easiest way to ensure that graphics files and other files referenced in your HTML templates are located and exported correctly is to add them to your project's "Baggage" in Project Files > Baggage Files in the Project Explorer. Then you can use any tag references you like and you don't need to worry about whether the files will be exported and integrated in your output.

All files in the Baggage Files section are integrated in your project automatically and can be referenced in your template code without any path information.

See Using Baggage Files for more information and instructions.