TDX Knowledge: Add an Image to an Article

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

  • Images should be uploaded to the server (as described in the instructions). 
    • Do not paste images into an article. Depending on the source, this could cause issues later.
  • Images must have alternative text. 
    • This is an accessibility standard.

In this article:

Adding an Image to an Article

  1. Open the article in edit mode if necessary.
  2. Go to the location where you want the image to appear. 
    • Images illustrating the result of having taken the previous step(s) should be below the step and align with its text as shown in several of the steps below. 
      1. Go to the end of the step you wish to add an image after.
      2. Important: Press Shift + Enter (Mac: Shift + Return) to insert a new line break. 
    • Images illustrating a button or an icon should be inline with step text unless the image would significantly impact line spacing.
      • Add a button or icon image after its reference in the text. For example: Click the Table button .
  3. Select the Image icon.
    WYSIWYG editor image icon highlighted
  4. Select the Upload tab.
  5. Click Choose File.
    image properties window; upload tab, choose file button highlighted with a file name associated
  6. Click Send it to the Server.
  7. Go to the Image Info tab.
    1. Enter appropriate Alternative Text. See Make Images Accessible Using Alternative Text.
      • Inline button or icon images should not have alt text. 
    2. You can re-size the image in this tab. Be sure the Lock Ratio padlock is locked.   
      • Note: Images should be no wider than 600 pixels. 
    3. Set the Border to 1 (unless the edges are already well-defined).
      image properties, image info tab filled out; the image is shows in preview
  8. Inline images: By default, an inline image will display on a separate line. To get an image to appear inline with the text:
    1. Go to the Advanced tab, then the Style field. Sometimes text exists in this field already; place your cursor at the end of the existing text.
    2. Copy and Paste the following text: display:inline;
      TDX image properties, Advanced tab, style text box. display:inline highlighted.
  9. Click OK. The image appears in the Body of the article.

Editing an Image

Modifying an image in TDX is easy. 

  1. Open the article in edit mode, if necessary.
  2. Double-click the image to open the Image Properties window.
  3. Make your changes.
    • Do not adjust the size of the image. Instead, use an image editor and then re-add the image.
  4. Click OK.

Correcting the Display of Inline Images

To correct the display of an image that should appear on the same line as the text, follow these instructions. 

  1. Open the article in edit mode if necessary.
  2. Double-click the image to open the Image Properties window.
  3. Select the Advanced tab.
    Image Properties dialog window with the display attribute highlighted in the Style field.
  4. Enter in the Style field: display:inline;
  5. Click OK.

Additional resources

Last modified

TDX ID

5422