Customize the blog comment module

[evargas]

Hello everyone.

I am trying to customize the default HubSpot module but all it has inside is:

{% blog_comments "blog_comments" limit=10000 %}

How can I customize the divs, clasess and css of the module? More importantly, how can I know which variables prints the name, email and comment of the visitor that wrote it.

I want to customize the look of the comments left on a blog post.

[Stephanie-OG · Accepted solution]

Hi @evargas 

Unfortunately you can't edit the HTML of the Comments module. However, you should be able to do a fair amount of customization using CSS, which is what I've always done.

I did check the Developer Info (go to a post, click on the sprocket icon in the top right hand corner > Developer Info) and you seemingly can access and print out the comment data by using something like this on your template: 

<div class="custom-comments">
  {% for comment in comments %}
  <div class="custom-comment">
    <p>Name: {{ comment.user_name }}</p>
    <p>Email: {{ comment.user_email }}</p>
    <p>Comment: {{ comment.comment }}</p>
  </div>
  {% endfor %}
</div>

So I guess, in theory, you could hide the default comments (#comments-listing) with CSS and use your own HTML. 

But I really wouldn't recommend it.

There's likely some functionality you'll be missing. For example, when you click on "Reply to", HubSpot automatically moves the form to underneath the comment you're replying to and will post the reply there. 

Also, the data is likely not intended for that kind of use and therefore could change in the future. 

---

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

[evargas]

Hi, @Stephanie-OG.

Thank you for your precise response and the example.

In the CMS documentation they only mention content.comment_list as a "list of comments for the current blog post" which is an iterable and is presumely able to print every comment (but it doesn't, it just prints garbage when I do {{|pprint}} in the iteration to see what's inside).

There is no documentation about comments variable (or at least I couldn't find it), thank you very much for sharing it! Hope it helps for others with the same issue.

As you mentioned, if we use only this variable, we lose the "reply to" functionality. So I will follow your advice and customize the css of the default module. (It would be great to customize it as a module).

Regards.

[Stephanie-OG]

Yeah, when there isn't documentation it usually means it's internal and not really intended for us to play around with. So you can, but you run the risk of things changing!

You can always add suggestions to Ideas, they sometimes make changes if there's enough demand.

---

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact