Skip to main content

KB Article Tutorials 02 – Adding Text and Images

Written by Terence Huynh on . Posted in 0-NO SEARCH.

About

This tutorial explains how to add text and images to a KB article.

Adding Text

Adding text in community is not much different than adding text to a confluence page or Word document. The community post editor includes basic text formatting tools similar to what you would see in applications like MS Word. You can use bold (Ctrl+b), italicize (Ctrl+i), underscore (Ctrl+u), and colorize text, as well as create bullets and numbered lists.

Using Headings

As a general rule of thumb, you should use a Heading 1 or Heading 2 for your section titles (see above usage of Heading 1 for the titles About and Basic Text Formatting). There are a total of 6 heading styles (Heading 1 – Heading 6), however, it’s not necessary to use more (smaller) than Heading 3.

Pre-formatted Style

The community post editor includes a special paragraph style called Preformatted. This style is meant for lines of text that resemble system commands, console commands, lines of code, etc.

Here is an example of some HTML code text using the Preformatted style:

<div class="uk-card " style="z-index: 1;" uk-sticky="offset: 100; media: 960">
   <h2>Additional Resources</h2>
      <ul class="uk-list uk-list-divider">
         <li><a href="/sfpt/" target="_blank" rel="noopener">Pass Trans Solution Page</a></li>
         <li><a href="/sfpt/documents" target="_blank" rel="noopener">Pass Trans Product Documentation</a></li>
         <li><a href="/sfpt/training" target="_blank" rel="noopener">Pass Trans Product Training</a></li>
      </ul>
</div>

Defining “Media”

Media, in the context of the Community, is any image, document, or attachment that you upload to the community in order for users to view or consume content. These includes:

  • Document types like PDF, Word, Excel, PPT, etc.,
  • Image and video types like JPEG, PNG, MP4, AVI,
  • Application wrapped in a ZIP file.

The most common form of media is Images. Howew

Adding Media

Before you can use any image in your KB article, you’ll need to first upload it to the Community’s Media Library. Just like how you need to download images to your computer before you can insert them in a Word document, you’ll also need to upload images to the Community in order for them to be used in KB articles.

To upload an image:

  1. Navigate to the Dashboard navigation menu and click Media > Add New.
  2. Click Select Files and choose the images you want to upload to the Community.
  3. Once files are uploaded, open the Media Library Assistant (Dashboard nav menu) to edit the media file’s details (see image callout 1 below).
    1. If you’re editing one media file, you can quickly edit by hovering over the media file name and clicking Quick Edit (callout 2 below)
    2. If you’re editing multiple files, you can perform a Bulk Action > Edit. (callout 3 below)

  1. Provide a media category for the image(s) you just uploaded. At a minimum, you should select the category of SFPT, SFLE, or SFWM for all images you upload (see callout 4 below). To help organize the database easier, you should also select a category that describes the image (Commander, WasteApp, DES, X1, etc.).
    See Note 1*.
  2. Provide an optional Caption and Description to the media file then click Update (see callout 5 and 6 below) .

*Note 1: About Media Categories

Just like with Posts, you’ll need to assign a category to your media file. While the Media Category may appear to look the same as the Post Category, they actually exist in different databases. There are 3 main “parent” media categories: SFPT, SFLE, SFWM. You need to select at least one of these categories, as it helps in keeping the content organized in the database. You should also use a category that provides a description. If you do not see any category that suits the needs of the image, then you can create a new sub-category under one of the parents.

To create a NEW media category:

  1. Go to Media > Library, and select the media file by clicking the Title/Name of the file.
  2. On the right side, go to Att. Categories, then click +Add New Att. Category.
  3. Select the parent (SFPT, SFLE, SFWM) and provide a new category.
  4. Click Update when complete.

How to Add and Format Images

To add an image to your KB article, use the Add Media button located above the editor’s toolbar. Locate the image and click Insert into post. By default, the most recently uploaded images will appear in the top left corner of the grid.

Images should be added on its own line before or after sentence. For layout consistency, do not insert images inline with text. Here is an example of an image below or above the text (preferred method)

Here is an example of an image inline with the text (do not do this!)

Notice:

When you insert the image inline with text, the size of the image dictates the spacing between paragraphs. If the image is narrow enough, it will fit beside the text but the paragraph or sentence will have excessive spacing above and below. If the image is too wide, then it will be pushed beneath the text. Adding images inline with text can often lead to weird and ugly spacing and formatting issues, making the entire KB article look unprofessional.

Adding Image Thumbnails

After you’ve added an image to your KB article, you can choose how the image displays on the web page. By default, images will display in full size. You have the option to reduce the image size and use a thumbnail instead of using the full size image.

Throughout this KB Tutorial, the images above are all displayed as “full size”. If you’re writing a KB article that uses many images, you can help reduce clutter and improve the user experience by using thumbnails that open the full size image in a new window.

Here is an example of image thumbnail usage (notice how clean this looks when layered with text.

Here is another thumbnail layered with some text.

How to create a thumbnail image

After you’ve added an image to your article, hover your mouse over the image and click the Edit (pencil) icon.

When the Image Details window opens,

  1. Navigate to Display Settings.
  2. Choose the Thumbnail in the Size field.
  3. Choose Media File in the Link To field.
  4. Select Open link in new tab in the Advanced Options.

What’s next?

Continuing on the topic of adding content, the next tutorial will go over how to add other forms of media like documents and videos, as well as hyperlinks to other web pages or resources. Go to next page now.