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

We currently restrict files to be no bigger than 200MB. If you need to upload a file that is larger than this, please contact us and we will make sure your file gets into your knowledge base.

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

To add images or files into your articles, 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.

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 "fluidMeida". 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 behinde 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;
}

Only Play GIFs While Hovering

GIFs have become more and more popular over the years, and are very useful in knowledge bases as they provide a simple way to demonstrate or instruct without requiring a proper video.

However having them start playing as soon as the article loads can be counterproductive, and even distracting (especially when there are multiple GIFs on the page). So here is a simple way to avoid that problem!

We're going to make it so that GIFs remain on the first frame when the page loads, and only animate while the user hovers their mouse over the GIF. It repeats indefinitely, and as soon as the mouse is moved off the image it reverts back to the first frame again. Magic!

There is no way to do this natively with JavaScript (without fiddling with each GIF), but you may use a great little plugin called FreezeFrame. Follow these steps:

1) Create a new snippet under Library Snippets. Switch to the Code Editor, paste the following script, and save.

<script src="https://cdn.rawgit.com/ctrl-freaks/freezeframe.js/master/build/js/freezeframe.pkgd.js"></script>
<link href="https://cdn.rawgit.com/ctrl-freaks/freezeframe.js/master/build/css/freezeframe_styles.min.css" rel="stylesheet"/>
<script>
$(function() {
$('.img-responsive').freezeframe();
});
</script>


2) Insert your new snippet into any article with a GIF, and it will freeze it until you hover. Check it out on our GIF below!

And voila, done! FreezeFrame also have plenty of other options (exemplified here) if you're feeling adventurous. And as always, you can get in touch with us if you need a hand or have any questions :-

GIF that only animates on hoverGIF with Freeze Frame