Insert an Image in a Knowledge Article

Overview

Including images in a knowledge base article can help customers accomplish their tasks more quickly.

This article covers:

• Inserting an Image
• Sizing an Image
• Reusing an Image

Inserting an Image

1. When editing the desired KB article, locate the desired location for the screenshot, and click to place focus.
    
   Note

   When placing images within numbered, or bulleted lists the cursor should be placed at the end of the line (e.g. after the period, colon, etc.) and then press shift+return twice in order to insert two line breaks (i.e. <br />) HTML codes. This will ensure that a) spacing exists between the image and the text above it, and b) that the image is still included with the appropriate list item (i.e. <li>) tag. This is important in order to ensure screen readers, and other accessibility technologies, can properly read/render the page contents as well as context.

   If the list continues after the image, it is also generally recommend to press shift+return one more time to have a trailing line breaks after the image, then press return to create the next list item in the sequence.

2. Click the Image button.
   
   
    
3. Click the Upload tab.
   
   
    
4. Click Choose File.
   
   
    
5. Locate the desired image on the file system.
   
   
   
   Select the file, and then click Choose.
    
6. Click Send it to the Server.
   
   
    
7. At the File uploaded successfully! dialog click Close.
   
   
    
8. The Image Properties will automatically switch to the Image Info tab.
   
   
    
9. Click the Alternative Text field, and enter descriptive text describing the image.
10. Optionally, adjust the image width, or height. See Sizing an image section for additional information.
11. Click Ok.

Sizing an Image

Below general practices that are in use at UAA in order to provide a consistent experience:

• Do not use an image size greater than 700 px wide as an in-line image. If you need to display larger image size use a smaller image in-line and create a link that opens in a new browser window that opens the larger image.

After you insert an image you may realize that the flow of the article feels a bit off due to the size of the inserted image. The simplest way to fix this is the adjust the HTML image attributes using the following directions.

1. Select the image.
2. Click the Image button.
   
   
    
3. In the Image Properties dialog window change the width, or height attributes as needed.
   
   
   
   By default the image is scaled uniformly; however, you can adjust one with dimension without changing the other by clicking the lock ratio button. Typically you will not need to use this button.
4. When finished, click Ok.

Reusing an Image

TDX does not currently have a means of viewing existing images that have already been uploaded to the Knowledge Base. However, you can still reuse these existing images in other articles. Follow the guidelines below for a relatively straightforward method to reuse images between articles.

1. Locate the existing KB article that contains the images you want to reuse, and open it into a new browser window, or tab if you prefer. We'll refer to this as the source article.
2. Click the Edit Article button for the source article.
3. In the original browser window/tab, open, or create, the article you want to add the images to. We'll refer to this as the target article.
4. Make sure you're in the Edit mode of the target article.
5. In the Source Article select the first image to reuse, and copy (Ctrl+C, Cmd+C, right-click copy).
6. In the Target Article locate the desired position to place the image. Click there to place the cursor insertion point.
7. Paste (Ctrl+V, Cmd+V, right-click paste) the image.

All the source HTML metadata (alt tags, image size, etc.) are copied over; however, you can customize these values in the Target Article without impacting the values in the Source Article.