Newscoop 4 Cookbook

Article comments

In this chapter you will learn how to display comments and the comment form, and how to use CAPTCHA or 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 template pack "The Journal", designed by Woo Themes and available on the Sourcefabric website. If comments are available, you can list them like this:

{{ list_article_comments columns="2" order="bydate desc"}} {{ if $gimme->current_list->at_beginning }}   <h4>{{ $gimme->article->comment_count }} Response(s) to "{{ $gimme->article->name }}"</h4>   <ol class="commentlist"> {{ /if }}    <li class="comment {{ if $gimme->current_list->column == "1" }}odd{{ else }}even{{ /if }}">       <div class="comment-head cl">          <div class="user-meta">              <strong class="name">{{ $gimme->comment->nickname }}</strong>              {{ $gimme->comment->submit_date|camp_date_format:"%e.%m.%Y at %H:%i" }}           </div>       </div>       <div class="comment-entry">           <p>{{ $gimme->comment->content }}</p>       </div>    </li> {{ if $gimme->current_list->at_end }}   </ol> {{ /if }} {{ /list_article_comments }} 

list_article_comments lists the comments. columns="2" is used to add "odd" and "even" classes in the list. order="bydate desc" assures that the newest comment appears on 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.

{{ comment_form html_code="id=\"commentform\"" submit_button="SUBMIT" button_html_code="tabindex=\"6\"" }} <label for="author"><small>Name (required)</small></label> {{ camp_edit object="comment" attribute="nickname" html_code="id=\"author\" 22\" tabindex=\"1\"" }} <label for="email"><small>E-mail (will not be published) (required)</small></label> {{ camp_edit object="comment" attribute="reader_email" html_code="id=\"email\" 22\" tabindex=\"2\"" }} <input type="hidden" name="f_comment_subject" value="Site comment" /> {{ camp_edit object="comment" attribute="subject" html_code="id=\"comment-subject\" tabindex=\"3\"" }} <label for="comment"><small>Comment</small></label> {{ camp_edit object="comment" attribute="content" html_code="id=\"comment\" rows=\"5\" tabindex=\"4\"" }} <img src="{{ captcha_image_link }}"><br /> <label for="f_captcha_code"><small>Enter the code:</small></label>{{ camp_edit object="captcha" attribute="code" html_code="id=\"comment-code\" tabindex=\"5\"" }} {{ /comment_form }} 

As shown above, the display of the form can be controlled to show up only IF the article allows commenting or IF the user has access to the article.

Spam control with CAPTCHA

To prevent automated spamming, you can add a CAPTCHA image to your comment form. It displays letters which the user needs to type in before posting their comment. Include a CAPTCHA by adding the following lines just before {{ /comment_form }}:

<img src="{{ captcha_image_link }}"><br /> <label for="f_captcha_code"><small>Enter the code:</small></label>{{ camp_edit object="captcha" attribute="code" html_code="id=\"comment-code\" tabindex=\"5\"" }} 

When submitting the comment, the string typed by the reader is checked against the CAPTCHA image. If it is not identical, an error can be displayed.

{{ if $gimme->submit_comment_action->is_error }}   {{ $gimme->submit_comment_action->error_message }}   {{ $gimme->submit_comment_action->error_code }} {{ /if }} 

The error code is machine generated and can not be changed. The error message can be changed in the administration interface, in "Localization".

Spam control with ReCAPTCHA Newscoop plugin

Instead of the solution mentioned above, you can use the ReCAPTCHA plugin (which works with Newscoop 3.5.2 and higher).  In that case, you only need to use:

<p> {{ recaptcha }} </p> 

You can read what reCAPTCHA is at http://www.google.com/recaptcha

Then, make sure to create the proper key for your site here:

https://www.google.com/recaptcha/admin/create

Your comment form will look like this

Steps to perform in order to work with this plugin:

  1. Download the recaptcha plugin from our site (if you installed Newscoop 3.5.2 or higher, you should have this plugin already in your Plugins Manager)
  2. Install and enable the plugin through the Plugins Manager in the Newscoop administration interface (in the main menu, Plugins -> Manage Plugins)
  3. Configure the plugin, the options are:
    1. Enable for comments:
    2. Enable for subscriptions:
    3. Enter the public key:
    4. Enter the private key:
  4. 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 configure 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" button_html_code="tabindex=\"6\"" }} [...] {{ /comment_form }} {{ /if }} 

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

Preview of comments

If you want to allow readers to preview their comments, you need to add the code preview_button="Preview" to {{ comment_form ... }}. "Preview" is the text that will be displayed on the button, but you can change this value.

{{ comment_form html_code="id=\"commentform\"" submit_button="SUBMIT" preview_button="Preview" button_html_code="tabindex=\"6\"" }} 

If you add the preview_button, you will see the button show up at the end of the form. If the reader writes a comment and clicks "Preview", the preview can be displayed using the following template code:

{{ if $gimme->preview_comment_action->is_error }}   <p>There was an error previewing the comment:      {{ $gimme->preview_comment_action->error_message }}   </p> {{ /if }} {{ if $gimme->preview_comment_action->ok }}     <b>Comment preview</b><br/>     Subject: {{ $gimme->preview_comment_action->subject }}<br/>     Reader e-mail: {{ $gimme->preview_comment_action->reader_email }}<br/>     Content: {{ $gimme->preview_comment_action->content }} {{ /if }} 

A good place to put this code is just above the comment form.

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="{{ uri }}#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>