FAQs on FAQs: Customizing answer previews

• facebook

Welcome back to FAQs on FAQs, a series designed to help you get the most out of your LibraryH3lp-powered FAQ. Last time, we talked about populating your FAQ with content. This time, we're covering a couple customizations that control how your patrons or colleagues (for internal FAQs) see the content you've just added.

Example list of questions with answer previews

The index of your FAQ lists all your questions along with a preview of the answer content sorted by most viewed. Simply scroll down the page to view them all.

Shorten 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. You can't go longer, but you can choose anything smaller than 400.

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:


Use 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. This was a recent topic in the LibraryH3lp Google group and we wanted to share the solution here. 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:

<p class="question-preview" style="overflow:hidden; height:75px;">
  {{ question.answer|safe }}
</p>
<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.

Missed a previous installment of FAQs on FAQs? Here are some quick links to help you catch up: real-time chat and e-mail contact options, mobile-specific view for patrons browsing on smartphones, adding content to your knowledge base.

Have suggestions or ideas for the FAQs on FAQs series? Want to get your own FAQ site up and running? Need to import existing content? Let us know!