Custom comments design

The Komments plugin comes with a handfull of snippets for displaying comments. If you want to display comments in another way, you can do so by using your own snippets.

Kirby allows you to overwrite snippets provided by plugins. This way you can use your own snippets to display comments on your site. The plugin comes with six snippets for the form, the listing and for each type of comment (if you use webmentions).

komments/kommentform
komments/webmention
komments/type/like
komments/type/reply
komments/type/repost
komments/type/mention

The first one kommentform is obvious, it renders the comment form. Of course you can use your own code here, but I would not recommend it. If you do so, make sure all the form fields have the same name and you also transfer the hidden fields to your own snippets. Otherwise comments may be falsely marked as spam or may even be rejected.

webmentions Is used for listing the comments. It comes with some logic for parsing comments and making it possible to reply and create nested comments. Whatever you do with your own snippets, make sure to copy the php logic block.

All the other snippets are used for the different type of comments, this plugin can handle. If you enabled webmentions all of them will be used if you don't use webmentions type/reply is your snippet to go. This renders a comment. You cannot do a lot of harm editing this snippet, but make sure to also use data-attributes and ids, otherwise nested comments will not work.

Overwriting the snippets

Of course you don't want to change the original files. If you do so, your changes will be gone with the next update. Kirby gives you a better method to use your own snippets. Go to your kirby root folder and then navigate to site/snippets. This folder may not exist if you haven't used snippets before. If it's not there, just create it.

To overwrite snippets of a plugin, you have to follow the namespace of the plugin. All snippets of this plugins are registered as komments/SNIPPETNAME or komments/type/xyz. Let's overwrite the snippet for a single comment.

In the snippets folder create a new subfolder named komments. Because all the snippets of the plugin are registered with komments/.... The different comment types are as komments/type/.... So we also have to create the subfolder type. The single comment snippet is named reply, create a php file with the same name. You should now have the path site/snippets/komments/type/reply.php.

If you would save the empty file, you wouldn't see any comments on your site. You can now start writing your own code for rendering a comment. Have a look at the original snippets in site/plugins/komments/snippets/ (or here) so you don't miss any data-attributes and ids which might be needed.

To overwrite other snippets just follow the steps from above.