Graphics in HTML templates

<< Click to Display Table of Contents >>

Navigation:  Reference > Project Structure & Templates > HTML Templates >

Graphics in HTML templates

You can reference external graphics in HTML templates, using any graphics types supported in HTML. This is generally JPG, GIF and PNG.

Automatic identification and export of graphics files

Graphics referenced in your templates with <img> tags and with background attributes in <body> and <table> tags (see below) will be located and exported automatically if possible:

Graphics listed in the project search path will be found and exported automatically. You do not need to enter path information in your templates for graphics files stored in these locations. You do need to add your project directory to the project search path explicitly if you have anything stored there directly, however.

Graphics stored in other locations will be found and exported if you include the paths to the files in your template code. These paths will be stripped from the code automatically when the project is published, where appropriate.

If you use other tags and/or store the files in one of the above locations you need to add the files to your Baggage Files. They will then be exported to your published output automatically, irrespective of where and how they are referenced.

See Graphics references in HTML templates for instructions and more information.

How graphics references in your templates are processed:

When you publish your project to an HTML-based format Help+Manual parses the template, resolves the file paths to graphics files if specified, copies the file to the destination output directory and removes any path information from the file references. In the case of HTML Help and Visual Studio Help the graphic is automatically integrated in the output file.

However, the parser only parses the three HTML tags and attributes listed below. No other image references are processed automatically.

Supported HTML tags:

Graphics referenced using the tags and attributes shown below are identified automatically by Help+Manual and exported with your project when you publish to HTML-based output formats. You do not need to do anything yourself to include them in your project.

If you reference graphics in your templates using other tags you should add them to the Baggage Files to make sure they are exported with your project. In particular, this also includes the variant images for mouseover buttons as they are not referenced with the tags listed below!

You should also add your graphics to the Baggage Files if they are not stored in the project folder and you do not want to add the paths to the graphics in your template code.

Automatically Parsed Tags

Supported Attributes

<body>

Images referenced with the background="" attribute.

OR

Images referenced within the style="" attribute using the syntax

style="background: #FFFFFF url(image.jpg)"

(this can be combined with other style elements, of course)

<img>

Images referenced with the src="" attribute

<table>

Images referenced with the background="" attribute

OR

Images referenced within the style="" attribute using the syntax

style="background: #FFFFFF url(image.jpg)"

(this can be combined with other style elements, of course)

See also:

Using Baggage Files

Using HTML Templates

Editing HTML templates

Help Windows