Sourcefabric Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Template library

Article comments

In this chapter you will learn how to display comments and the comment form, and how to use ReCAPTCHA spam protection. Comments are the place for your readers to give their feedback on an article. Comments also reflect the conversation of the community of your publication. Your readers are not only communicating their ideas about the article, but also communicating with each other.

Enabling and disabling comments is set for each publication in the administration interface. Here you can enable or disable comments for publications, for article types and for individual articles. If you switch off comments at the publication level, no comments can be added at all. The next level is article type: if you disable comments here, the option will not appear in the Article Edit screen for articles of this type. If both of these options are enabled, editors can switch commenting off for an individual article.

Listing the most commented articles

Before we dive into article comments, here's a little nugget showing how you can list articles by the number of comments they have, in descending order:

{{ list_articles order="bycomments desc" }}
  <p>
    {{ $gimme->article->name }},
    comments: {{ $gimme->article->comment_count }}
  </p>
{{ /list_articles }}

This list_articles function will list the articles inside the current section, by default. To list all articles from an issue use:

{{ list_articles ignore_section="true" order="bycomments desc" }}

For the entire publication, use:

{{ list_articles ignore_section="true" ignore_issue="true" order="bycomments desc" }}

Listing article comments

The following code has been taken from the theme "The New Custodian". If comments are available, you can list them like this:

<h3>{{ $gimme->article->comment_count }} response(s) on “{{ $gimme->article->name }}”</h3>

{{ list_article_comments order="bydate desc"}}

  {{ if $gimme->current_list->at_beginning }}
    <section id="comment-list">
  {{ /if }}
<article id="comment-{{ $gimme->current_list->index }}" class="clearfix">

<header>
 <h4>
  {{ if $gimme->comment->user->identifier }}
  <a href="http://{{ $gimme->publication->site }}/user/profile/{{ $gimme->comment->user->uname|urlencode }}">{{ $gimme->comment->user->uname }}</a>
  {{ else }}
  {{ $gimme->comment->nickname }} (not registered)
  {{ /if }}
 </h4>
 <time datetime="{{ $gimme->comment->submit_date|camp_date_format:"%Y-%m-%dT%H:%iZ" }}">{{ $gimme->comment->submit_date|camp_date_format:"%e.%m.%Y at %H:%i" }}</time>
</header>

  <p>{{ $gimme->comment->content }}</p>

</article>
  {{ if $gimme->current_list->at_end }} 
    </section>
  {{ /if }} 

{{ /list_article_comments }}

list_article_comments lists the comments. order="bydate desc" assures that the newest comment appears at the top of the list. The other values in this example are pretty much self-explanatory.

More properties of the article comment can be printed, like e-mail or unique ID. You can find these properties in the reference part of this Cookbook. If you want to display the comments only if commenting is enabled, use the above code inside the following IF function:

{{ if $gimme->article->comments_enabled }}
  [... code goes here ...]
{{ /if }}

If you want to display the comments only if the reader has access to the content of the article - either because it is available to all, or because the user is logged in and has a subscription to the content - use the above code inside the following IF function:

{{ if $gimme->article->content_accessible }}
  [... code goes here ...]
{{ /if }}

You can also combine the two like this:

{{ if $gimme->article->comments_enabled && $gimme->article->content_accessible }}
  [... code goes here ...]
{{ /if }}

Creating the form for article comments

The comment form can be styled freely. It is wrapped in {{ comment_form }} which creates the form tag automatically. The HTML inside is limited only by your imagination.

This is a comment form that could be provided to logged-in users - for these users we don't need to ask for e-mail and nickname, because we already have that data.

{{ comment_form html_code="id=\"commentform\"" submit_button="Submit" button_html_code="class=\"form-button\"" }}
 <div class="form-element clearfix">
  <label for="comment">Your comment</label>
   {{ camp_edit object="comment" attribute="content" html_code="id=\"comment\"" }}
 </div>
 <div class="form-element clearfix">
  <label for="f_captcha_code">Enter the code</label>
   {{ recaptcha }}
 </div>
{{ /comment_form }}

If the user is not logged in, two more elements can be inserted into the comment form:

<div class="form-element clearfix">
 <label for="author"><small>name (required)</small></label>
  {{ camp_edit object="comment" attribute="nickname" html_code="id=\"author\"" }}
</div>
<div class="form-element clearfix">
 <label for="email"><small>e-mail (required)</small></label>
  {{ camp_edit object="comment" attribute="reader_email" html_code="id=\"email\"" }}
</div>

The whole template with additional 'if' clauses for checking what kind of form should be presented to the user can be seen in the New Custodian template called _tpl/article-comments.tpl.

Spam control with reCAPTCHA Newscoop plugin

For spam control, you can use the reCAPTCHA plugin. You can create public and private keys by following the link provided in reCAPTCHA plugin preferences: https://www.google.com/recaptcha/admin/create

Steps to perform in order to work with this plugin:

  1. Enable the reCAPTCHA plugin via the Newscoop administration interface (in the main menu, Plugins -> Manage Plugins)
  2. Configure the plugin, the options are:
    1. Enable for comments:
    2. Enable for subscriptions:
    3. Enter the public key:
    4. Enter the private key:
  3. Include the appropriate template tag within your forms:

comments form:

 {{ recaptcha }}

subscriptions form:

 {{ recaptcha form='subscriptions' }}

Finally, enable the use of CAPTCHA for your publication in the Publication configuration screen.

Checking for errors and article moderation

To go through the process of submitting, checking and giving feedback on article moderation you could structure the template in the following way:

{{ if $gimme->submit_comment_action->defined && $gimme->submit_comment_action->rejected }}
    Your comment has not been accepted.
{{ /if }}

{{ if $gimme->submit_comment_action->is_error }}
    {{ $gimme->submit_comment_action->error_message }}
    {{ $gimme->submit_comment_action->error_code }}
{{ else }}
    {{ if $gimme->submit_comment_action->defined }}
        {{ if $gimme->publication->moderated_comments }}
            Your comment has been sent for approval.
        {{ /if }}
    {{ /if }}
{{ /if }}

<h2>Leave a Reply</h2>
{{ if $gimme->user->blocked_from_comments }}
    You are not allowed to comment.
{{ else }}
    {{ comment_form html_code="id=\"commentform\"" submit_button="SUBMIT" }}
      [...]
    {{ /comment_form }}
{{ /if }}

In this example you can also see how and where to place feedback for banned users.

Nested comments: using threads and levels

Comments can be displayed as nested trees.

<ul>
  {{ assign var="level" value="1" }}

  {{ list_article_comments order="default asc" }}

    {{ if $gimme->comment->level gt $level }}
      {{ assign var="level" value=$gimme->comment->level }}
      <ul>
    {{ /if }}

    {{ if $gimme->comment->level < $level }}
      {{ php }}
        $gimme = $this->get_template_vars('gimme');
        $level = $this->get_template_vars('level');
        $count = $level - $gimme->comment->level;
        for (; $count > 0; $count --) {
          echo "</ul>";
        }
      {{ /php }}
      {{ assign var="level" value=$gimme->comment->level }}
    {{ /if }}

    <li>{{ if $gimme->comment == $gimme->default_comment }}<b>{{ /if }}
    Level: {{ $gimme->comment->level }}
    <a href="{{ url }}#comments">
    Subject: {{ $gimme->comment->subject }}, Reader email: {{ $gimme->comment->reader_email }}
    </a>
    {{ if $gimme->comment == $gimme->default_comment }}</b>{{ /if }}<br/>
    Content: {{ $gimme->comment->content }}
    </li>

  {{ /list_article_comments }}
</ul>

There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.