Featured images for chapter titles

<< Click to Display Table of Contents >>

Navigation:  More Advanced Procedures > HTML Output and HTML Templates >

Featured images for chapter titles

The Featured Image and Description  settings in the Topic Options tab associate individual graphic images and descriptions with any topic. You can reference the description text and the image with variables in your HTML page templates to display the description text and the image together with the topic content. For example, you can display a title image with an overlaid description  as used in Help+Manual's own online help, as shown below:

The featured image and description are used to replace  the topic heading in the main top-level chapters

The featured image and description are used to replace
the topic heading in the main top-level chapters

If you are using an HTML skin you must edit your templates and settings in the skin!

Nowadays you will almost always choose an HTML skin to publish your project to WebHelp or HTML Help/CHM. A skin is a special kind of Help+Manual project without topics that only stores your HTML templates and all the settings relevant for HTML output to these two formats. When you choose a skin, the templates and settings in the skin completely replace those in your project.

Normally, a skin is pre-designed and you don't need to change anything. However, if you do want to change something, you must do all your editing in the .hmskin skin file. Editing in your Help+Manual project won't have any effect because those templates and settings are not used.

To edit a skin, make a copy of the .hmskin skin file in your project folder and then open it in Help+Manual by selecting .hmskin as the file type to open in the Open dialog. All the templates and settings are in the same places as in a normal Help+Manual project.

Exception: HTML Export Options

The HTML Export Options section is not stored in skins and needs to be edited in your project.

Variables and include conditions for description and featured image

You insert and control the description and images with two variables and one pair of include conditions:


This inserts the file name of the topic image for the current topic so that you can display it in your template. You use it in an image tag, like this:

<img src="<%TOPIC_PICTURE%>"/>

Image file names must be HTML-compatible! No spaces, accented characters, non-ASCII characters or non-alphanumeric characters allowed!

The associated image is exported automatically. You don't need to add any path information, because the image is always accessible directly with its name.


Inserts the topic description text as plain text. When you are inserting it in a template you will need to include it in an appropriate HTML tag, for example a paragraph tag:



These conditions make it possible to include or exclude HTML template content based on whether the current topic has an associated featured image. For example, you will usually only want to use title images for top-level chapters, and the normal topic header in normal topics with no associated images.

   Code for the title image version goes here...
   Code for the normal header version goes here....