Help+Manual locates graphics on the disk by searching in the directories listed in the Project Search Path. You do not normally need to add image folders to the path manually. The program does this for you when you insert images from a new folder.

•To edit the Image Folders list manually go to Configuration > Common Properties > Program Search Path for your current project in the Project Explorer.

•See Project Search Path for more details.

You are free to move your image files and image folders whenever you like. Since only the image file names are stored in your project you just need to change the references in the Project Search Path to tell Help+Manual where to look for the files.

1.Move and/or rename the image folders and their contents.

2.Edit the Project Search Path (see above) to remove the old directories and add the new ones. Help+Manual will now find your images in the new location(s).

Splitting and consolidating image folders:

You can also reorganize your image files in any way you like – for example move all your image files to a single folder or to multiple folders in any locations. You just need to tell Help+Manual where to look for the images in the Image Search Path settings.

The references in the Project Search Path are actually relative, even though the full paths of all the folders are shown for your information. This means that moving your project is very easy.

•If you save both your project folder and your image folders in the same folder you can move your project without needing to make any changes to the Project Search Path.

•If your image folders and your project folders are in different locations you will need to update your Project Search Path after moving your project folder.

It's always important to avoid duplicate filenames for your graphics. This applies in particular for modular projects, because you will often have separate graphics folders for each project.

Duplicate names across project modules are OK in HTML Help with runtime merging because then each module is published individually and the correct graphics will be used. However, you need to avoid duplicates in all other formats and in modular projects with publish-time merging in HTML Help.

Use filename prefixes for graphics files in modules

The simplest solution for this problem is to add a unique prefix to the filenames of graphics files used in modules, in the same way that you use prefixes for the topic IDs in modules. The prefix should be short – two letters and an underline character are usually plenty – and should identify the module.

The Insert Image dialog has two optional fields for Picture ID: and HTML Class:. An ID you enter here will be exported as the id="your_id" attribute for the image's <img> tag in HTML-based output formats, and the HTML class is exported as the class="your_class" attribute.

Tip: You can enter multiple class names separated by spaces in the HTML Class: field if you need more than one class for the image.

You will not need these features for normal graphics but they are sometimes useful. For example, if you are planning to manipulate your graphics with your own CSS or JavaScript code.

Creating auto-incrementing IDs for cloned copies of images

In HTML an ID always has to be unique, you should never have more than one object on the same page with the same ID. This can be a problem if you are cloning copies of a ready-made image. You can get around this by creating an automatically-incrementing ID with text variables.

You can't mix text and variables in topic IDs so you need to create two variables to do this.

1.Go to Project Explorer > Configuration > Common Properties > Text Variables and create two text variables, one for the static part of the ID and one for the incrementing number. The static part can have any name you like, the incrementing number must have two plus characters at the end of its name, for example IMAGENO++.

2.Let's say the two variables are IMAGEID and IMAGENO++. Now enter any text you like as the text for the IMAGEID variable, for example myimage_, and a 0 (the number zero) as the text for the IMAGEENO++ variable, like this (this example shows similar variables for use in tables):

3. Then instead of an ID, type in both variables in the Picture ID: field in the Insert Image dialog (or double-click on an image that has already been inserted), like this:

<%IMAGEID%><%IMAGENO++%>

Then every time you make a copy of the image in your project a new unique ID will be generated automatically. The first will be myimage_1, the second will be myimage_2 and so on.