In this document:

• Overview
• Creating an attachment folder in a new document
• Creating an attachment folder in a saved or published document
• Using drag and drop to add images
• TinyMCE Shortcuts

Overview

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 users.

Creating an attachment folder in a new document

As you are building your new document, and before you have saved or activated it, you have the option to create a document attachment folder which will store the files and images that you would want to make available for this particular document.

To do so, as you are editing this document, place a checkbox in the Attachment: Create a new doc attachment folder option just below the text editing area.

Once you have done so, you can click Save change to add the folder to your document. 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.

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.

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.

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.

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

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.

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

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 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:

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.