Step 1: Reference the Image from within the XML Comment
You can use standard HTML syntax to insert the link to an image inside the comment.
C#
/// <summary>
/// The ClassLibrary22.One namespace.
/// </summary>
namespace ClassLibrary22.One
{
/// <summary>
/// A useful class.
///
/// <para/>
/// <img src="../{Imagefolder}/UML Diagram 1.jpg" />
///
/// </summary>
public class Class2
{
/// Class code here
}
}
VB
''' <summary>
''' A useful class.
'''
''' <para/>
''' <img src="../{Imagefolder}/UML Diagram 1.jpg" />
'''
''' </summary>
Public Class Class2
' Class Code here
End Class
In the example above, "A useful class." is the standard descriptive text of a comment. The following (optional) "<para/>" paragraph tag ensures there is some space between this main comment and the image.
The "img" image tag identifies the location and name of the file to be displayed. The location of the "Imagefolder" will be covered in the next step.
Step 2: Configure the Image Folder and Build the Help File
In the Visual Studio main menu, select Tools > GhostDoc Pro > Build Help File.
In the Dialog that appears next, select the folder that contains the image you want to include. (In this example this will be the file named "UML Diagram 1.jpg" which is located in the Pictures folder.)
Next, click on the OK button to build the Help file.
When the Help file has been generated, you will see the inserted image in the Help file:
Optional Step 3: Add additional Text Comments for the Image
If the image needs further text explanation, you can add this by extending the comment in the usual way: For example:
C#
/// <summary>
/// A useful class.
///
/// <para/>
/// The following diagram describes the database structure:
/// <para/>
/// <img src="../{Imagefolder}/UML Diagram 1.jpg" />
///
/// </summary>
VB
''' <summary>
''' A useful class.
'''
''' <para/>
''' The following diagram describes the database structure:
''' <para/>
''' <img src="../{Imagefolder}/UML Diagram 1.jpg" />
'''
''' </summary>
The additional text will appear above the image:
Optional Step 4: Add an Alt tag to the Image.
Although the image will be embedded in the Help file, you may still wish to follow the standard procedure of including a text description of the image if the user hovers the mouse over it. You do this in the usual way using an Alt tag:
C#
/// <summary>
/// A useful class.
///
/// <para/>
/// The following diagram describes the database structure:
/// <para/>
/// <img src="../{Imagefolder}/UML Diagram 1.jpg" alt="UML Diagram" />
///
/// </summary>
VB
''' <summary>
''' A useful class.
'''
''' <para/>
''' The following diagram describes the database structure:
''' <para/>
''' <img src="../{Imagefolder}/UML Diagram 1.jpg" alt="UML Diagram" />
'''
''' </summary>