Files and images

Who can access the files and images in my knowledge base?

The Security Settings for your knowledge base (Settings > Security ) determine the general security requirements for readers to access your knowledge base.

The files you upload to your knowledge base--PDFs, Excel sheets, screenshots, Word documents, etc.--do not automatically use this same security.

By default, even if your knowledge base requires login, the files you've uploaded do not require login. This is by design so that you can give customers the link to specific documents and they can easily download the file by clicking on that link or URL without having to log in to your knowledge base.

However, you can adjust your security settings so that readers have to be logged in to access files and images stored within your knowledge base. 

Adding files and images inside of articles

Images, screenshots, or sample files can add examples and detail to your documentation. The process of adding files and images to articles differs a little between the Modern Editor and the Legacy Editor.

Modern Editor: Files

Click the file (Upload File) icon. You can choose to upload a new file or add an existing file from your library.

Upload file icon

To upload a new file, drag and drop the file into this pop-up, or click anywhere in the Drop File box to browse to a file for upload.

To add an existing file from your library, click the folder icon.

Add from Library icon

This will open a pop-up where you can search for files, with the most recent files first. Click the image you'd like to upload and click the Insert File button.

Add from Library pop-up

Modern Editor: Images

To add images to your articles, edit your article and click on the Add Image icon near the upper left (or use Ctrl + P).

Add Image button

You can choose to upload a new image, add an image by URL, or add an existing image from your library. 

To upload a new image, click the icon with the arrow pointing up. You can drag and drop an image into this pop-up, or click the window to browse to an image for upload.

To add an image by URL, click the chain links, add the URL for the image, and click Insert:

Add from URL icon/pop-up

To add an existing image from your library, click the folder icon:

Add from Library icon

This will open a pop-up where you can search for files, with the most recent images first. Click the image you'd like to upload and click the Insert File button.

Sample Add from Library pop-up

Legacy Editor: Images & Files

To add images or files into your articles using our Legacy editor:

  1. Open your article in edit mode.
  2. Click on the Add File / Image button near the top.Screenshot showing the Legacy Editor with a callout to the Add File / Image button
    Legacy Editor Add File / Image button
  3. This will open the Add from Library pop-up, displaying the most recent files first.
    Screenshot showing the Add from Library pop-up that opens once Add File / Image is clicked
    Sample Add from Library pop-up in Legacy Editor
  4. To use an existing file in the library:
    1. If necessary, use the search bar at the top to search for the file you want to add.
    2. Click on the file or image to select it.
    3. Click the Insert File button to insert the file into your article.
      Add from Library search, selection, and button
    4. Be sure to Save your article after you insert the files/images you want!
  5. To add a new file to your article and the library:
    1. Click the Upload New File button in the lower left corner.
      Upload New File button in lower left
    2. This will open an explorer window; navigate to the file you wish to upload, select it, and click the Open button in the lower right.
      Sample explorer window to find and select the file you want to upload
    3. You'll see the name of the file you selected for upload in the lower left. Make sure it's what you wanted. Then click the Insert File button to insert the file into your article.
      Uploaded file name replaces the Upload File button in lower left
    4. Be sure to Save your article once you've added the files/images you wanted!

Adding files and images in bulk

To add multiple files and images at once:

  1. Go to Library > Files.
  2. Click the Add Files button in the upper left.
    Screenshot showing the File Library with a callout to the Add Files button in upper leftAdd Files button in File Library
  3. This will open a pop-up where you can either drag files from your desktop/File Explorer into the pop-up, or click the button to Browse Files, navigate to the files you want to add, and open to add them.
    Screenshot showing the Upload Files pop-up, callouts to the "Drag files here" section and the Browse to Files button in lower leftDrag files to the popup where it says "Drag files here" or click Browse to Files to open a window
  4. Once you've added the files you'd like to upload, click the Upload Files button in the lower right.
    Click the Upload Files button to complete the upload


Adding videos to your articles

You can quickly and easily embed videos into your articles using the Insert Video option in the Modern editor.

We cap individual file upload size at 200MB. Many longer videos exceed this. For those videos, we recommend hosting on a third party video provider and using the second option here (Embedded Code).

There are four ways to insert videos. For all four, you'll begin the process in the editor by clicking on the Insert Video icon in the editor toolbar:

Screenshot with an arrow pointing to the Insert Video icon in the Modern editorThe Insert Video option in the Modern Editor

  1. By URL (the link icon)
    Use the By URL option to paste in a URL from Youtube, Vimeo, Dailymotion, Yahoo, or Rutube. The editor will automatically embed it for you using that site's player, using whatever defaults exist for the video.
    To use this option:
    1. Click the link icon (first icon) in the Insert Video pop-up.
    2. Paste in the URL to the video.
    3. Click the Insert button.
      Screenshot showing the Insert Video pop-up with the By URL option selected and a sample Vimeo video URL with arrows pointing to the URL and the Insert button
      Sample video URL
  2. Embedded Code (the </> icon)
    Most third-party video providers (such as Vimeo, Wistia, YouTube, etc.) will generate embed codes for their videos. Depending on your video provider, you may have a bit more control with the Embedded Code in how the video displays. By URL uses the default settings for the video; with Embedded Codes, you can sometimes toggle various configuration options.
    To use this option:
    1. Click the code icon (second icon) in the Insert Video pop-up.
    2. Paste in the Embed Code for your video.
    3. Click the Insert button.
      Screenshot showing the Insert Video pop-up with the Embedded Code option selected and a sample Vimeo video embed code with arrows pointing to the code and the Insert button
      Sample Vimeo embed code
  3. Upload Video (upload arrow)
    Use this option to upload a video file directly from your computer to KnowledgeOwl. File size limit is 200MB. The video will be displayed using an HTML5 video player, which supports MP4, WebM, and Ogg video formats. MP4 is the only file type that works in all major browsers.
    To use this option:
    1. Click the upload icon (third icon) in the Insert Video pop-up.
    2. Drag a video file from your computer into the pop-up or click the Drop video area to open a file browser window to locate the file and add it.
      Screenshot showing the Insert Video pop-up with the Upload Video option selected
      Upload video pop-up
    3. Once you've selected or dropped the video you'd like to upload, it will automatically be uploaded and inserted.
  4. Add From Library (folder icon)
    Use this option to add a video that you've already uploaded to your File Library.
    To use this option:
    1. Click the folder icon (final icon) in the Insert Video pop-up.
    2. This will open an Add from Library window.
      Screenshot showing the Add from Library window, with the word "add" in the search box, a checkmark in the upper right of the thumbnail for "add-kbs.mp4", and an arrow pointing to the Insert File button in the lower right
      Add from Library window
    3. Browse or search for the video you wish to upload.
    4. When you find the correct video, click on the thumbnail for it to select it (this will add a checkmark in the upper right corner).
    5. Click the Insert File button to insert the video.

Editing the inserted video

Once your video has been uploaded, you can further tweak how it displays by clicking in the white space next to the video. This will bring up a contextual menu:

Screenshot showing the video menu, with each icon numbered 1-5 beginning at the leftVideo menu

You can use this menu to:

  1. Replace this video with a different video
  2. Remove this video from the article
  3. Change the Display option for the video (Inline vs. Break text)
  4. Change the Alignment for the video (Left, None, Right)
  5. Resize the video

Editing and updating files

Every file you add to an article in your knowledge base is stored in your File Library. You can access files there to update the name, the file itself, and labels associated with that file.

Renaming files

By default, files are uploaded with a name based on the file you originally uploaded. This is the name that will show up when the file is downloaded/opened.

If you'd like to edit this to something more user-friendly or search-friendly:

  1. Go to Library > Files.
  2. Find the file you'd like to edit (use search or the Labels filters if necessary).
  3. Click on that file.
  4. Click the Edit link in the lower left corner or just above the file thumbnails on the left.
    Click on the file and then click either of the two Edit links
  5. This will open the Edit File  pop-up. Edit the File Name to be what you'd like.
  6. Click the Save File button in the lower right.
    Edit the File Name and then Save File

Updating files

Linus is a busy little owl, and he updates a lot of screenshots and articles. Whenever he can, he reuses existing screenshots in the File Library. When it comes time for him to update that screenshot, rather than manually replacing the screenshot in every single article he used it in individually, he updates the existing file in File Library with the new screenshot.  This approach has some great advantages:

  • It's a real time-saver for editors (one update in File Library rather than manually editing a bunch of articles)
  • It keeps the File Library from getting bloated with old/outdated/duplicate copies of files
  • It guarantees that everywhere the screenshot was used, it's updated to the latest version of the file

We strongly recommend updating files from the File Library!

To make this kind of update:

  1. Go to Library > Files.
  2. Find the file you'd like to edit (use search or the Labels filters if necessary).
  3. Click on that file.
  4. Click the Edit link in the lower left corner or just above the file thumbnails on the left.
    Select file and click one of the two Edit links
  5. Click the Upload New File button in the lower left.
    Upload New File
  6. Navigate to and select the new version of the file you want to replace the existing one.
  7. The name of the file you've selected will display in the lower left corner. If this is correct, click the Save File button in the lower right.
    Confirm new file to be uploaded in lower left is correct and Save File

As the warning at the top of the pop-up notes, while most articles will update immediately, some can take up to an hour to update. Contact us if you have issues with a file not updating.

Find the URL to your File Library file

There are a few places within KnowledgeOwl where you might need to have the URL to your image, like Changing the background image on your homepage.

There are two ways to get that URL:

  1. Go to Library > Files.
  2. Click the hyperlinked name of the file.
    Screenshot showing the File Library with a callout to one of the file's hyperlinksFile hyperlink in File Library
  3. This will open the image in your browser. Copy the URL from your address bar to use it where you need it.
    Screenshot showing the file URL in a browser's address barSample file URL in new tab of browser

Alternatively:

  1. Go to Library > Files.
  2. Click the image thumbnail.
    Screenshot showing the File Library with a callout to a file thumbnailFile thumbnail in File Library
  3. This will open the details of the image in the lower left. You can copy the URL from there to use it where you need it.
    Screenshot showing the File Library with a single file selected, details showing in lower left, and callout pointing to the URL in those detailsFile details open in lower left window

File upload errors

File upload errors are generally caused by one of two things:

  1. Files which are too big for KnowledgeOwl storage
  2. Files which have been corrupted in some way

Files uploaded to KnowledgeOwl cannot be bigger than 200MB. Uploading files larger than 200MB will throw an error.

If you have a file larger than 200MB, we recommend using another hosting provider to store this file. Depending on the tool, you can then either:

  • Insert a link to the URL of that file in your article
  • Use the hosting provider's embed tools to generate an embed code you can add to your article. For videos, you can use the Embedded Code option to paste the embed code from a video hosting platform into your article. See Embed videos for more information.
    Insert Video > Embedded Code

If the file you're uploading is under 200MB and it's still throwing an error, the file may be corrupted. Try opening it in the program you created it in, saving a new copy, and uploading that new copy.

Display PDF file in articles

Note: We used to recommend using Google Docs embed viewer. We stopped recommending this approach in 2018, after all major browsers began supporting displaying PDFs and Google stopped updating the Google Docs embed viewer. We now recommend a basic iFrame, as outlined below.

You can display PDFs inside your articles using an iFrame. This allows you to embed your PDFs inside articles similar to how you can embed YouTube videos using an embed code. 

Embedding PDFs is often easier for both users and readers. Users don't have to convert the PDFs to web format, and readers can view the PDFs without having to download them. KnowledgeOwl also indexes the content of uploaded PDFs for search so your readers can find articles in search even if the text is inside a PDF.

To embed a PDF in an article using an iframe

  1. Upload the PDF to KnowledgeOwl to get the URL. You can upload files under Files > Library, or you can upload the file directly into the article. Both will give you the link. A PDF link looks like this:
    //dyzz9obi78pm5.cloudfront.net/app/image/id/5b75b38fad121c1c11143be6/n/example-article.pdf
    If you've already uploaded the file you want to work with, so it's in your File Library, you can quickly find the URL for that file.
  2. Click on Code View (Source) in the WYSIWYG editor to get to the HTML and paste the following code where you want the PDF to appear.
    <iframe src="//dyzz9obi78pm5.cloudfront.net/app/image/id/5b75b38fad121c1c11143be6/n/example-article.pdf" width="100%" height="750px"></iframe>
  3. Replace the bold URL with the URL of your PDF and save. 

Here's what a PDF looks like embedded in an iframe:

Display Microsoft Office OneDrive files in articles

If you are using Microsoft Office Online (including Office 365), you can embed Microsoft Office files directly from your OneDrive account into KnowledgeOwl articles, without uploading those Office files to your knowledge base.

Embedding files is often easier for both users and readers. Users don't have to worry about file conversion or incompatible software, and readers can view the files without having to download them. It also guarantees that as soon as you make changes in OneDrive, your knowledge base readers will see the updated file contents.

To embed a Microsoft Office file in OneDrive into an article using an iframe

  1. Open the OneDrive file you'd like to embed in your article.
  2. Go to File > Share.
  3. Select Embed.
  4. This will prompt you to Generate the embed code (your screen may look slightly different depending on which Office product you're using). Click the Generate button.
  5. This will open a pop-up where you can configure your embed code. The options here will vary based on the Office file type (e.g. Powerpoint options are different from Word). For documents and spreadsheets, we recommend using something in the 600px-800px range for your height.
    Sample Word embed code configuration screen
  6. Once you're finished changing the settings, copy the code in the Embed Code box.
  7. In your article in KnowledgeOwl, click on Code View (Source) in the WYSIWYG editor to get to the HTML and paste that embed code in.
  8. Save your article.

Here's a PowerPoint presentation embedded from OneDrive:

Display Microsoft Office file in articles

You can display Microsoft Office files inside your articles using an iFrame and the Office Online Doc Viewer. This allows you to embed your MS Office files inside articles similar to how you can embed YouTube videos using an embed code.

Embedding files is often easier for both users and readers. Users don't have to worry about file conversion or incompatible software, and readers can view the files without having to download them.


Update October 16, 2019: Microsoft has taken down the web portal for their Office Online Doc Viewer. We've been in contact with Microsoft but haven't found out if it was moved or decommissioned. For now, it looks like they are still supporting the viewer itself, just not the URL encoding. The steps below will help you generate an appropriate encoded file URL to use with the viewer.

If you use Office Online, we recommend embedding files directly from OneDrive without uploading them to KnowledgeOwl.   Contact us if you need help!

To embed a Microsoft Office file in an article using an iframe

  1. Upload the file to KnowledgeOwl to get the URL. You can upload files under Files > Library, or you can upload the file directly into the article. Both will give you the link. A sample Powerpoint file link looks like this:
    https://dyzz9obi78pm5.cloudfront.net/app/image/id/5da780688e121c1973a70e2a/n/sample-presentation.pptx
  2. Once your file is uploaded, copy the URL for that file.
  3. Go to URL Encode and Decode. Paste your file's URL into the top section and click the Encode button.
    This will generate an encoded version of your URL which you can use in your iframe:

  4. Copy that URL.
  5. Click on Code View (Source) in the WYSIWYG editor to get to the HTML and paste the following code where you want the file to appear.
    <iframe width="100%" height="600" scrolling="yes" src="https://view.officeapps.live.com/op/view.aspx?src=ENCODED-URL-HERE">
    </iframe>
  6. Replace the bold ENCODED-URL-HERE with the encoded URL you generated in Step 3 and save.
    For our example, our embed code would look like this:
    Sample iframe embed code for a Powerpoint presentation

Here's what a Powerpoint presentation looks like embedded in an iframe:

Custom image captions

Image captions are a great way to explain what you are demonstrating in an image or to call out what you wish to have readers focus on.

The steps for adding captions to images differ depending on whether you're using the Modern Editor or Legacy Editor.

Modern Editor

In the Modern Editor, simply click on the image to open the image editing pop-up and then click the dialog bubble to add a caption:
Screenshot of the Image Caption button in Modern EditorImage Caption button in the Modern Editor

This creates the image caption area and you can type in the caption you'd like.

Styling Modern Editor captions differently

To style the captions used in Modern Editor differently across your knowledge base, go to Settings > Style. Here is the default CSS; you can add Custom CSS for this class and whichever attributes you wish to edit, and save:

.documentation-article .fr-img-caption .fr-img-wrap>span {
    margin: auto;  /*change the margins*/
    font-size: 14px; >/*change the font-size*/
    font-weight: initial;/*font bold/not bold*/
    max-width: 100%; /*How much of the image's width should the caption take up?*/
    background: #656565; /*Background color for the caption*/
    border-radius: 0px 0px 4px 4px; /*Border-radius creates rounded corners*/
    padding: 5px; /*Padding between the text and the edge of the caption*/
    color: #fff; /*Text color*/
    line-height: 1.72222; /*Line height*/
}

Legacy Editor

The Modern Editor has a function to add captions to images. This tutorial explains a method to add your own captions using HTML and is primarily targeted towards people using the Legacy editor. 

Setup

The setup for image captions will require you to delve into the HTML source code of your document. But don't worry--we provide what you need below, so you can copy and paste it without having to write HTML from scratch.

  1. Start by uploading the image you wish to add a caption to.
  2. With the image uploaded, right-click on it.
  3. Click on Image Properties.
     Screenshot showing the image right-click menu with a callout to the Image Properties option
    Image Properties option in image right-click menu
  4. In the pop-up that appears, if the Width and Height fields are blank, click the refresh arrow next to height and width. (If they aren't blank, skip to step 7.)
    Screenshot showing the Image Properties pop-up, with a callout to the refresh arrow next to the Width and Height
    The image size refresh arrow
  5. This will generate the default height and width for the image. You can leave these as-is or adjust them to your liking. Click OK when you're done adjusting.
    Screenshot showing the height and width populated
    Height and Width added
  6. With the image added with height and width, click the Source button in the editor toolbar.
    Screenshot of the Legacy Editor with a callout to the Source button in upper left
    Legacy Editor Source button
  7. Find your uploaded image in the HTML. It will begin with<img class=:
    Screenshot showing a sample of the Source view of an image
    Sample image HTML in Legacy Editor
  8. Copy and paste the below HTML in just before the image's HTML:
    <div class="img-and-caption">
    The end result will look like so: Screenshot showing the img-and-caption div in the HTML
    Image HTML with img-and-caption div added before it
  9. If the img is in a paragraph (as ours is in this screenshot), remove the <p> and </p> tags before and after it:
    Screenshot showing the same img-and-caption div and img HTML but with paragraph opening and closing tags removed
    Same code as above, but with <p> and </p> tags before and after the img removed
  10. You should see the width of the image at the very end of the image's HTML. Depending on how you've edited things, it will either say width="number" or style="width: number;":
    Screenshot of the width setting of the image in HTML
    Sample image width setting
  11. For the image caption, copy and paste the below HTML in after the image's HTML.
    <div class="img-caption" style="width: 500px;">Your Caption Here.</div>
    </div>
    1. Replace "Your Caption Here" with the caption text you wish to use.
    2. Replace the "500px" in the width statement with the width in your image's HTML.
      Here's a sample with the width set to match my image, and a caption of "My sample caption":
      Screenshot of a complete image with caption HTML
      Completed sample of image with caption

Style your captions

This won't look like much until we add some styles for the img-and-caption and the img-caption divs we just added. To do so:

  1. Go to Settings > Style.
  2. Under the preview pane, be sure you're in the Custom CSS tab.
  3. Copy the code below and paste it into your Custom CSS. This CSS can be customized as you desire to get the right look and feel for your knowledge base!
    /* Format the caption itself: text alignment, padding, color = font color; border-radius sets slight curve; font-size sets font size */
    .img-caption {
      text-align: center;
      padding: 5px 0;
      color: #fff;
      background-color: #333;
      border-radius: 0 0 4px 4px;
      font-size: 14px;
    }
    
    /* Add a border below the entire img-and-caption div */
    .img-and-caption {
      margin-bottom: 30px;
    }
    
    /* Format images with captions to have no bottom-margin, no box shadow, a thin border around the sides and top, and curved corners */
    .hg-article-body .img-and-caption img {
       margin-bottom: 0 !important;
       box-shadow: none;
       border: 1px solid #ddd;
       border-bottom: none;
       border-radius: 4px 4px 0 0;
    }

These styles, applied to our original sample, will produce a caption like this:
Screenshot of the original image with the styled caption, which is white text on a dark grey backgroundSample styled caption

Adjust image width for all images

By default, KnowledgeOwl sets images to have a max-width of 100%. This means that images are displayed at actual size but can never be wider than your article--they're automatically resized to fit within the article. Here's an image with the default 100% max-width:

If you'd like to keep images automatically smaller than 100% width on all screens/devices, we recommend adding some Custom CSS to set that max-width to a different percentage. Using a percentage helps keep the images responsive to fit on any screen size or device.

To make this adjustment:

  1. Go to Settings > Style.
  2. Below the preview pane, click on the Custom CSS tab.
  3. Copy this code. If you want a max-width other than 70%, adjust the percentage accordingly:
    .img-responsive {
         max-width: 70%;
    }
  4. Be sure to Save your changes.
    Your code should look something like this:
    Sample Custom CSS setting max-width of responsive images to 70%

Now the same image is only 70% of the width of the article:

You can increase or decrease the percentage for the desired size, and this will apply to all images in your articles. 

Pro Tip: We recommend using a percentage rather than a static pixel size to ensure your images look great on all devices.