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. 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. Refer to Make Images Accessible Using Alternative 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.
      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, even if it looks like it's on the same line in the draft. 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.

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.
    • Note: If adjusting the image size, make sure the image Lock Ratio is set to lock (closed padlock) to keep the proportions consistent.
      TDX image properties, lock ratio highlighted and set to Lock.
  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.
  4. Enter in the Style field: display:inline;
  5. Click OK.

Additional resources

Last modified

TDX ID

5422