SubMain - CodeIt.Right The First Time!

/Community

Support Community for SubMain Products
 Home Products Services Download Purchase Support
in Search
 
Home Forums Blogs Tutorials/CIR Tutorials/GD Downloads
Welcome to SubMain Community Sign in | Join | Help

Tutorials

How to embed Images in a Generated Help File

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.

image1

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.)

image2

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:

image3

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:

image4

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>
Published Friday, March 28, 2014 10:52 AM by xtab

Comments

No Comments
Anonymous comments are disabled
    
 
     
 
Home |  Products |  Services |  Download |  Purchase |  Support |  Community |  About Us |