Choose the image to insert in the file selector, at current cursor location.

The image is added to current idea (shown in the idea properties with a default title beginning by "--"), while WIT creates the HTML insertion code (see note 2).

Removing an inserted image is easy : just select it and press the delete key. It will also be removed from idea properties as WIT rebuilds the page.

The ".TextImage" CSS style controls how this image is displayed in the text (advanced use).

At build time, WIT will copy the image file to its target location while generating the page.

Note : you can also drag and drop (single or multiple) images files directly in the WYSIWYG editor from the file explorer. If the dropped image is not correctly placed, select it and drag it to its new location (watch the moves the insertion point in the text as you move the image).

Note 2 : the code that WIT inserts in the page looks like:

<img alt="@@initial_path\image.png@comment@@" src="computed_path/image.png">

At code generation time (either for the "Preview view", either while building the whole web site), WIT analyses ALT attribute value thanks to the @@ and @ markers, and changes the 'initial_path' (local access to the resource, relative or absolute) into a 'computed_path' (relative access to the resource, as seen from the generated page code). The 'computed_path' is placed into the SRC attribute.

Meanwhile, to allow the WYSIWYG editor to properly display images, and absolute access path is mandatory in the SRC attribute: WIT also temporarily does this job.

What's more, an eventual comment (located in the ALT attribute after the @ marker) is reused in the final code.

In practical terms, for an image "image.png" placed in an "Images" subfolder of your current WIT project, you'll get the following HTML code in the HTML view :

<img alt="@@.//Images/image.png@Your comment@@" src="C:/Projects WIT/Images/image.png">

and in the generated web page, you'll get the code:

<img alt="Your comment" src="../wit-icons/image.png">

(the web site generation process has also copied the "image.png" file from your current work directory to the 'wit-icons' subfolder of the target folder that contains all the generated web site).