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.

Shortening the preview

By default, answer previews are limited to 400 characters and shown in plain text (no HTML markup). But say you want shorter previews of just 200 characters. Previews are easily shortened with a bit of template customization. Edit the preview.html template and add a filter after the question.preview variable so it looks like this:

{{ question.preview|truncate(200) }}...

Showing HTML instead of plain text

Or maybe you don't want plain text for your answer previews; maybe you want your previews to contain styled HTML content. Again, this can be done with a bit of editing within the preview.html template. You'll want to make this:

<p class="question-preview">
  {{ question.preview }}...
  <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>

look like 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>

The safe filter for the question.answer variable allows for HTML markup. And the style on the paragraph controls the height of the area allowed for your answer, ensuring any extra content past the specified height is hidden; just change the height to suit.

FAQ URL: