How do I customize the FAQ answer previews?

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

Changing the preview

By default, answer 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 answer 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, FAQ answer 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 question's answer after 400 characters. You can adjust this number up or down to suit.

FAQ URL: