Files and images

Adding Files and Images

To add multiple files and images at once, you can use the "Add Files" button located at the top of the file library tab here:

File Upload Errors

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
    Insert Video > Embedded Code

Editing and Swapping Files

After you have uploaded a file, you may want to change the name of it for easier searching. This can be easily done by clicking on the edit link underneath the file in the file library.

You may end up using a file in a lot of articles and then realize that you actually need a different version of the file. The good news is that by editing the file and uploading a new one, everywhere that you used the file previously will automatically update with the new file. This can be great when you are documenting software that changes a lot. Upload initially and then edit and re-upload whenever necessary.

Obtain a URL to Your File Library File

There are a few places within KnowledgeOwl where you might need to have the URL to your image; for example when specifying a background image. 

To obtain the URL to your uploaded file, find that file within your file library and click the link to open that image. 

This will open the image in your browser. Copy the URL from your address bar to use it where you need!

Adding Images and File Inside of Articles

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.

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.

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.

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

Upload new image icon

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, edit your article and click on the Add Image / File button on the left. You will be shown the 10 most recently uploaded files from your library, but you can also search your library for file names. Another option is to upload and insert a new file from your computer which will then be available in your library for future use.

Adding Links to Download or View PDF Files

You can easily upload PDF articles to you File Library and share them with your readers. 

Click here to view an example of a PDF download link

Create a link to download the PDF 

  1. Upload the PDF to your File Library. 
  2. Go to the share link. 
  3. Copy the URL from the browser. 
  4. Go to the article where you want to include the link.
  5. Highlight the text or image you want to link to the PDF. 
  6. Click on the link icon on the toolbar. 
  7. Paste the URL to the file. 
  8. Go to Target and choose New Window (blank) to open the file in a new tab or window. 
  9. Hit Ok and then Preview or Save to view or test the PDF. 

Display PDF file in articles

Note: We used to recommend using Google Docs embed viewer. Not all major browsers had the ability to display PDFs. For example, Firefox would download them. But, now that all major browsers display PDFs, we recommend a basic iFrame. The Google Docs embed has some bugs and Google does not seem to support it. Plus it's easier!

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



To embed a PDF in an article using Google Doc viewer (no longer recommended):

  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.
  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="https://docs.google.com/gview?url=https://app.knowledgeowl.com/app/image/id/539b6043fe775a8348000003/n/Example-Article.pdf&embedded=true" style="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 the Google Doc Viewer.

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, you can also embed 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:

Sharing Files from a Restricted Site

While access to your knowledge base and articles is restricted when using security settings like IP protection, shared passwords, or reader logins; files uploaded to your File Library can be shared externally.

By giving your customers the link to the document, they can easily download the file by clicking on the link/URL without having to log in to your knowledge base. 


Embed videos

You can quickly and easily embed videos into your articles using the Insert Video option in the editor. There are four ways to insert videos.

  1. By URL
    Insert the URL of a video from Youtube, Vimeo, Dailymotion, Yahoo, or Rutube. The editor will automatically embed it for you.
  2. Embedded Code
    Insert the embed code from a third party video provider without having to go into the Code View (HTML Source).
  3. Upload Video
    Choose a video file from your computer. While the HTML5 video player supports MP4, WebM, and Ogg video formats, MP4 is the only file type that works in all major browsers.
  4. Add From Library
    Choose an existing video file from your file library.



Resize video embeds for mobile (responsive design)

When you embed videos from a video hosting site like Youtube, Vimeo, or Wistia, the embed codes have a defined height and width. This can cause your videos to appear too small on large monitors or too large on mobile devices.

While you could switch the width to "100%", the height will remain static so the dimensions of your video will skew depending on the size of your screen.

Here's a little hack you can add to your theme to take advantage of responsive embeds.


  1. Go to Settings > Style > Body HTML.
  2. Paste this code into the bottom of your Custom HTML:
    <script>
      $(function() {
        $('iframe').wrap("<div class='embed-responsive embed-responsive-16by9'/>").addClass('embed-responsive-item');
      });  
    </script>
  3. Paste this code into your Custom CSS:
    /* -- responsive embed styles -- */
    
    .embed-responsive {
      position: relative;
      display: block;
      height: 0;
      padding: 0;
      overflow: hidden;
    }
    .embed-responsive .embed-responsive-item,
    .embed-responsive iframe,
    .embed-responsive embed,
    .embed-responsive object,
    .embed-responsive video {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .embed-responsive.embed-responsive-16by9 {
      padding-bottom: 56.25%;
    }
  4. Save.
  5. Now your videos should resize beautifully on any device!

Resizing iFrame with 100% Height

This solution is courtesy of Michael Lancaster. The original solution appears on his blog in the article Fluid iframe with use of javascript.


  1. In Source, wrap your iframe in a div with the class "fluidMedia". Here's what that would look like: 
    <div class="fluidMedia">
        <iframe frameborder="0" height="100%" scrolling="no" src="http://www.knowledgeowl.com/" width="100%"></iframe>
    </div>
  2. Copy and paste the following style block into the article source. If you are using this code in multiple articles, you might want to add the styles to your Custom CSS instead. 
    <style type="text/css">
    .fluidMedia {
        position: relative;
        padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }
    
    .fluidMedia iframe {
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%;
        height: 100%;
    </style>
  3. Save and watch the magic!

Custom Image Captions

There is a now an option to add captions to images in the new editor. This tutorial explains a method to add your own captions using HTML and is primarily targeted towards people using the legacy editor. 

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. For example, the below image captions describe what is happening behind the scenes in a SurveyGizmo survey.

Setup

The set up for image captions will require you to delve into the HTML source code of your document. Don't worry though, it's as easy as copying and pasting!

Start by uploading the image you wish to add a caption to. Once the image is uploaded to your article click the Source button in the editor toolbar. 

Find your uploaded image in the HTML. It will look like so:

Copy and paste the below HTML to precede the image:

<div class="img-and-caption">Image HTML

The end result will look like so:

<div class="img-and-caption"><img class="img-responsive" height="279" src="//dyzz9obi78pm5.cloudfront.net/app/image/id/553fb3597cb82993327b23dd/n/2015-04-28_1020.png" width="409" />

Now, for the image caption, copy and paste the below HTML (also in the source code) and replace "Your Caption Here" with the caption text you wish to use. 

<div class="img-caption">Your Caption Here.</div>

Finally, copy and paste the below HTML for a closing div to wrap everything up:

</div>

Next, you'll need to specify a width for your caption so that it aligns with your image. You'll need to look at your the HTML for your image itself to find the width.

If no width displays go back to the visual view of your article and adjust the image a bit by clicking and draging the corner. This will insert a width in the HTML of the image. It will look like the following:

Once you have your image width, it's as easy as pasting the below HTML inside your img-caption div. 

style="width: 409px"

The end result will look like so:

<div class="img-and-caption">

<img class="img-responsive" height="279" src="//dyzz9obi78pm5.cloudfront.net/app/image/id/553fb3597cb82993327b23dd/n/2015-04-28_1020.png" width="409" />

<div class="img-caption" style="width: 409px">Question Value Merge Code when value is present.</div>

</div> 

The final step is to add some CSS to make this look pretty! Copy and paste the below CSS under Settings > Style in the Custom CSS field. This CSS can be customized as you desire to get the right look and feel for your knowledge base!


.img-caption {
  text-align: center;
  padding: 5px 0;
  color: #fff;
  background-color: #333;
  border-radius: 0 0 4px 4px;
  font-size: 14px;
}

.img-and-caption {
  margin-bottom:30px;
}

.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;
}