Drupal 8 Comment module - How to configure comments module from ugly to beautiful - Theming comments module

Introduction

Drupal provides a powerful comment module, which comes as a part of core modules. You have to enable this module.

This module is not having good documentation, and the default theming makes it super ugly. I mean, who wants a permalink to a comment. Lets have a look the default look:

(The ugly look)

Configure Comments module

• First enable this module from: /admin/modules
• Now, you have to a comment type from /admin/structure/comment
• Give it a name, and in Target entity type, select Content

• Save it and Click on Manage Fields
• There is already a body field present
• Goto “Manage Form Display*
• I don’t want to display subject field. Move Subject field to disabled section.
• Click on Manage Display, Move Links to disabled section.
• Make label as hidden.
• Under same Manage form display, Click on setting icon of Comments
• Select Number of rows to 2 only. This will make the height of textarea box smaller.
• Check on Hide the help link About text formats.
• Check on Hide text format guidelines.

Now, we will goto our content type where we want to show comments.

• goto /admin/structure/types
• On your desired content type, Click on Manage Fields
• Add a new field
• Select Comments under General section
• In Preview comment, select Disabled. This will not show preview button on form.
• Save
• If you have not themed your content page, then you might need to re-order this field in Manage display section.
• Save it.

Allowed Formats

If you have installed Allowed Formats module, it will be more flexible. It won’t give the drop down of selecting particular format for users.

• goto your comment type: /admin/structure/comment
• Edit the body field
• Under Allowed Formats, select Basic Html and save

Theme comments form

1. Theme content output

This post is not about how to theme your content. However if you have themed your content already, you need to render comment field in your content like:

//Bootstrap code
{% raw %}
<div class="card mb-4 shadow-lg p-4">
    {{ content.field_comments }}
</div>
{% endraw %}

2. Theme Parent Comment twig file

The default twig file for comment form is:

/core/themes/classy/templates/field/field--comment.html.twig 

Copy this file into your theme’s template folder. And, modified content is:

{% raw %}
{%
  set classes = [
    'field',
    'field--name-' ~ field_name|clean_class,
    'field--type-' ~ field_type|clean_class,
    'field--label-' ~ label_display,
    'comment-wrapper',
  ]
%}
{%
  set title_classes = [
    'title',
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}

{% set num_comments = comments | length %}

<div id="accordion">
  <div class="card-header234" id="commentCollapseId">
    <button class="btn btn-link" data-toggle="collapse" data-target="#commentsCollapseOne" aria-expanded="true" aria-controls="commentsCollapseOne">
        <h4{{ title_attributes.addClass(title_classes) }}>{{ label }}</h4>
    </button>
    <span class="small">(Click to Expand)</span>
  </div>

  <div id="commentsCollapseOne" class="collapse collapsed" aria-labelledby="commentCollapseId" data-parent="#accordion">
    <section{{ attributes.addClass(classes) }}>

    {% if num_comments == 0 %}
      <p>There are no comments</p>
    {% endif %}

    {% if comment_form %}
      <h4 class="title comment-form__title">{{ 'Add new comment'|t }}</h4>
      {{ comment_form }}
    {% else %}
      <p>Please <a href="/user">login</a> to post comments</p>
    {% endif %}
    
    {{ comments }}


    </section>
  </div>
</div>

{% endraw %}

In this twig file, following are important points:

• I have used accordion of bootstrap
• I have rendered comment form on top, then the comments if any
• If there are no comments, and you have set permission not to allow anonymous user to post comment. User will see nothing. So to avoid this I have checked if the comment form is not available and set a message: Please login And if the user is authenticated one, and there are not comments. I have checked the number of comments, and put a message for no comments.

3. Theme Comment form and data

The actual twig file from base theme is:

/core/themes/classy/templates/content/comment.html.twig 

Copy this file to your theme’s template directory. Following is the modified content:

{% raw %}
{% if threaded %}
  {{ attach_library('classy/indented') }}
{% endif %}
  
<mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
<hr>
<blockquote class="blockquote">
  <p class="mb-0">{{ content }}</p>
  <footer class="blockquote-footer"><cite title="Source Title">{{ author }}</cite></footer>
</blockquote>

{% if parent %}
  <p class="parent visually-hidden">{{ parent }}</p>
{% endif %}

{% endraw %}

Important points about above code:

• For each comment, I have hidden the permalink and date of posting the comment
• I have shown the author name as link.
• If you want to theme how your username should be displayed, you need to see username.html.twig file

Permissions

By default, authenticated users are allowed to post comments without any approval. I wanted to show only approved comments, to avoid spams.

• Goto: /admin/people/permissions
• Look for comment configuration Skip comment approval
• Uncheck it for authenticated users. This will prevent even authenticated users to post comments without approval.
• save it. Clear cache.
• Now, when some authenticated user will post comment. You need to approve the comments.
• To approve the comments, goto: /admin/content/comment/approval
• You will see a list of unapproved comments.
• For the comments, you want to approve. Select them and on Action, select: Publish comment

Get Email notification for comments posted

Note, if you want to have some email notifications whenever some user post a comment on your content. You can install any of the following modules:

• Rules
• Comment Notify
• Simple Comment Notify

I have written a post about how to use Rules module for this pusporse. See How to configure Rules module for email notification for comments

Final picture

I have themed the content, see the final display