Center Graphic with Description

Issue

The standard markup for displaying an attached graphic, or image, in the page, shown in the code block below, justifies the graphic on the left border of the text area.

attachment:file.png

This is shown below with an Example Graphic.

This is fine for content development and internal use. However, as content moves towards external publication a more formal presentation may be required.

The issue is thus how to center a graphic within the text bounties and document with description directly below.

Solution

SQI provides a simple markup framework that centers the graphic and selects the right style of the description. The graphic and description below show the results of using this markup framework.

Figure 1: Example of Centered Graphic/image

Markup Framework

Steps to center graphic, or image, and provide a description are:

1. Copy the framework below and past into the page at the spot where the graphic is to be placed.

   [[HTML(<div class="graphic">)]]
   attachment:file.png
   [[HTML(</div>)]]
   [[HTML(<p class="figure">Figure #: Description</p>)]]
   

2. Replace file.png with the actual name of the attached graphic/image.

3. Replace the # with the actual figure number.

4. replace Description with the actual description.

Special Formating in Description

From time-to-time the figure description may need to include the mono-spaced code formating. In that case repalce the figure markup line with:

[[HTML(<p class="figure">)]]Figure #: Description[[HTML(</p>)]]

For example, if a graphic shows the user should click the Exit button then the following markup

[[HTML(<p class="figure">)]]Figure #: Select `Exit` call-out Desciption[[HTML(</p>)]]

Produces:

Figure #: Select Exit call-out Desciption