How do I customize the knowledge base content previews?

The index page of your knowledge base lists all your article titles along with a preview of the content sorted by most viewed. As with other aspects of your knowledge base, previews can be tweaked to suit.

Changing the preview

By default, content previews are limited to a height of 75px. You can shorten or extend this by adjusting the height in pixels. Edit the preview.html template and look for the "height" setting in the style attribute then adjust as needed. For example, changing 75px to 150px will double the amount of content shown whereas changing 75px to 50px will shorten.

Here's what the default looks like:

  <div class="clearfix">
    <div class="question-preview" style="overflow:hidden; height:75px;">
      {{ question.answer|safe }}
    </div>
    <a class="question-popover pull-right" rel="popover" data-original-title="Answer" data-load="/questions/{{ question.id }}/answer" href="/questions/{{ question.id }}">
      answer <i class="icon-forward"></i></a>
  </div>

And if you'd like to remove the preview entirely, simply delete all of the code shown above in the preview.html template and leave the rest as is.

Truncating previews based upon characters instead of height

By default, knowledge base content previews are limited by height (75px). Maybe you don't want HTML for your answer previews by height and instead want to limit previews by character count. Again, this can be done with a bit of editing within the preview.html template. You'll want to make this:

<div class="question-preview" style="overflow:hidden; height:75px;">
  {{ question.answer|safe }}
</div>
<a class="question-popover pull-right" rel="popover" data-original-title="Answer" data-load="/questions/{{ question.id }}/answer" href="/questions/{{ question.id }}">read more <i class="icon-forward"></i></a>

<p class="question-preview">
  {{ question.preview|truncate(400) }}...
  <a class="question-popover pull-right" rel="popover" data-original-title="Answer" data-load="/questions/{{ question.id }}/answer" href="/questions/{{ question.id }}">read more <i class="icon-forward"></i></a>
</p>

The new code will truncate the article's content after 400 characters. You can adjust this number up or down to suit. 

FAQ URL: