KB User's Guide - Documents Tab - Adding Images and Attachments

There are several ways users can add images and other attachments to their documents, and each requires attention to key steps as part of the process. This document will introduce and outline these options.

In this document:


With the addition of the TinyMCE editor, as well as general Knowledgebase improvements, users have been presented with several different options to include images (and files) in their documents for their audience. The doc attachment folder is the individual document folder where items such as images or files can be stored to make available to your audience.

Creating an attachment folder in a new document

As you are initially building your new document, the doc attachment folder will not yet exist. To create it, you must first click the Save change button below the TinyMCE editor. Once that document is saved, you now will see a link to Open doc [document ID number] attachment folder. Clicking on this will open the attachment folder, allowing uploading of files as well as renaming and deleting of those files.

Screenshot of the created link for opening the document attachment folder Screenshot of the document attachment folder

Creating an attachment folder in a saved or published document

When you are working with a document that has had an attachment folder already created, such as a saved or published document, the checkbox option will not be available. In this case, there will be a link titled Create doc [document ID number] attachment folder. Clicking on this prompt will create a system message asking if you would like to create an attachment folder. Clicking OK will create and open the documents attachment folder.

Screenshot showing the link to create a document attachment folder Screenshot of the system prompt asking the user if they want to create a document attachment folder

Using drag and drop to add images

The last way to add images to your document is to drag and drop an image or group of images into a document. To do so, select an image from a desktop or folder and drag the image into the editor area, or drag an image from another web page into the editor area. Doing any of these options will automatically place the image into your document, as well as add it to your document's attachment folder.

Screenshot graphic displaying the drag and drop process with an arrow pointing from the image file to the document editor space

Please be aware, however, that when the image is dropped into your editor area and is uploaded to the attachment folder, it is given a generic alphanumeric file name. It is also not saved when the KB's autosave process runs.

Screenshot of generic filename applied to image drag and dropped into a document

You are encouraged to update this file name using proper file name conventions via the document attachment folder. Be sure to also add the file extension (png, jpg).

Using TinyMCE Shortcuts to add Attachments

Insert/edit image

Toolbar icon for adding or editing an image

The TinyMCE editor has two specific ways to add images through its interface. First, you can follow the menu path for Insert > Image, or you can click on the Insert/edit image icon in the toolbar.

Screenshot of menu path to insert an image  

Choosing either of these brings up the Insert/edit Image options.

Insert or edit image option popup window

A url can be copied and pasted into the Source field; be sure to add appropriate alternative text for the image, or select "Image is decorative" if the image is not meant to add information to the content of a page; and you can set the width and height of the image. In the Advanced section, you can see what styles are applied to the image, as well as provide vertical and horizontal space with an option to add a border to the image as well.

Once you have added your information, click the Save button to insert the image into your document.

KB Attachments 

The KB Attachments button is labeled with the text "Insert/upload KB attachments" and looks like a folder with an image graphic on the front.

The KB Attachments plugin is found next to the Image button in the toolbar, or under the Insert menu. It gives the ability to easily upload and place files from the group and doc attachment folders into your document. In order to place attachments from the folders into documents, click the KB Attachments plugin. You will be presented with an attachment file dropdown, as displayed in the image below:

The dialog window is titled "Draft/shared attachments" and contains a dropdown labeled "Attachment files". Below the dropdown menu are buttons labeled Close, Draft folder, Shared folder, and Place. The Place button is grayed out until a file is chosen.

From this drop down you will be able to select files from the shared attachment folder. If the document has an attachment folder, you will also be able to select files from that location.

Select the desired attachment. Depending on the file type, there are specific options:

  • Image files:
    • General options:
      • Alternative description: enter alt text for the image. If the image is purely decorative, select the 'Image is decorative' checkbox, and the alt text field will be left blank. 
      • Width and Height Fields
    • Advanced options:
      • Vertical and Horizontal space: set the image's white space padding
      • Border width and Border style: add an optional border style and set the border's width
      • Border radius and Border color: set the border's corner curve and the border's color
  • JavaScript/CSS files:
    • Place as drop down: add as additional resource in JavaScript/CSS field, hyperlink to the file, import the file in the body content
    • Link display text if hyperlinking file
  • PDF files:
    • Place as drop down: hyperlink to the file, embed PDF content in iframe
    • Link display text if hyperlinking file
    • Width and Height Fields if embedding in iframe
  • Video (mp4, webm, ogg) and Audio Files (mp3)
    • Place as drop down: video/audio in a media player, hyperlink to the file
    • Link display text if hyperlinking file
  • Other files: 
    • Link display text 

Click the Place button to insert your attachment into the document. 

Clicking Draft folder or Shared folder buttons will respectively open either the document attachment folder or the shared attachment folder. 

Keywordspng, jpg, upload, drag, drop, drag and drop, attach, attachment, folder, picture, photo   Doc ID126951
OwnerMatt G.GroupKB User's Guide
Created2023-03-29 12:04:43Updated2024-06-03 09:21:14
SitesDoIT Help Desk, KB User's Guide
Feedback  0   0