Adding an image to a knowledge base article

Overview

This article is designed to guide any UO Service Portal content creators through the process of adding an image to a knowledge base article (KBA). This guide will cover

  • how to annotate an image
  • how to upload an image to the article, and
  • how to maintain web accessibility standards.

Annotating an image

Image annotation is a way to visually highlight specific content within an image about what you are trying to explain. This is helpful when an image may have multiple objects on it that may draw attention away from your intent. Annotation can be done using various software applications available to all including Preview for macOS and Paint 3D or the Snipping Tool app for Windows among others.

Example of image annotation

The image is showing the location of the Add Image button from the article editor toolbar.

There are many buttons and drop-down menus in the image above but it is done so that what you are highlighting is shown within its context. The annotation in this image is designed to guide the reader to the location of the Add Image button in the service portal's article editor toolbar.

How to upload an image to a KBA

Once your image is annotated to your liking, you can upload it to your article by using the Add Image button in the editor toolbar.

Click the Add Image button from the editor toolbar

This will reveal the Image Properties dialog box. Click on the Upload tab to proceed.

The Image Properties dialog box with the Upload tab highlighted.

Then, click on the Choose File button and choose a file from your computer's file system.

The Image Properties dialog box in the Upload tab with the Choose File button highlighted.

Once the file is selected, click the Send it to the Server button to upload the image.

Upload tab of the Image Properties box shown with Send it to the Server button highlighted.

You should see a browser notification that will tell you that the image has been successfully uploaded. Click OK on that notification and you will be redirected to the Image Info tab.

Maintaining web accessibility

To ensure the web accessibility of your article, you must put a brief description of the image into the Alternative Text field. This allows for the web browser, screen-reading software, and other assistive technology to assist any readers who are unable to see the image.

Note: A border may be necessary to provide contrast between the image and the page background to maintain web accessibility. Any number placed into the Border field will add a border to the image in that many pixels and will be shown in the Image Preview pane of the dialog box. For example, the number 2 in the Border field will be two pixels thick.

Create a Ticket Print Article

Details

Article ID: 124339
Created
Mon 1/11/21 1:54 PM
Modified
Mon 7/8/24 11:27 AM

Related Articles (5)

How do I add anchors to make a table of contents in an article?
This article is designed to guide content creators through the process of adding related articles to a knowledge base article (KBA) in the UO Service Portal.
Instructions on how to create a new knowledge base article.
This article is intended to provide users within the UO Service Portal that have the ability to create, edit, and publish knowledge base articles.
Learn how to upload content from other content editors into the UO Service Portal.

Related Services / Offerings (1)

Use this service to request assistance and consultation from the USS Knowledge Manager for questions pertaining to the knowledge base style guide, documentation as a service, and general knowledge management.