Setting up kirby3 commentions

Hello everyone, I’m trying to set up the great plugin from Sebastian Greger. I try to get into the basics of Kirby and therefore have several hurdles. Maybe someone can help me here.

I follow these instructions: https://github.com/sebastiangreger/kirby3-commentions

I copied the files, added the config.php (step 1) and also adjusted the blueprint (step 2). However, now I get the hint that libraries are missing and I am facing the first problem. Is this a message from Kirby in general or from the plugin?

1

Many thanks for the support.

I assume you installed the plugin “manually”, i.e. not using Composer.

This plugin relies on two libraries not included in the repository due to potential licensing issues (html-php5 and HTML Purifier; used for filtering, analysing and formatting HTML input). The Composer method takes care of installing these dependencies. Alternatively, when installing as Git submodule or via download, the plugin kirby-sanitizer should be installed as well, making the missing libraries available.

(ref. “Installation” chapter of the Readme file)

So it’s a message from the plugin: you need to install the companion plugin kirby-sanitizer as well (this is due to the legal grey zone of using LGPL libraries in an MIT-licensed plugin).

Those who can read have a clear advantage. Sorry.

I have now prepared myself for “Adding a comments inbox to a blueprint”. My target file is the already complex blog.yml of my theme. My plan was to place it in the top right. What did I do wrong? It looks like before.

title: Blog
icon: text

options:
  duplicate: false

tabs:

  # content tab
  content:
    label: 
      en: Content
      de: Inhalt
    icon: text
    columns:
      left:
        width: 1/2
        sections:
          content:
            type: fields
            fields:
              header:
                extends: fields/headerImage
              altTitle:
                extends: fields/altTitle
              intro: 
                label: 
                  en: Intro text
                  de: Einführungstext
                type: textarea

          drafts:
            extends: sections/articles
            headline: 
              en: Drafts
              de: Entwürfe
            status: draft

          unlisted:
            extends: sections/articles
            headline: 
              en: In Review
              de: Im Rückblick
            status: unlisted

      right:
        width: 1/2
        sections:
          commentions:
            type: commentions
            show: pending        

        sections:
          listed:
            extends: sections/articles
            headline: 
              en: Published
              de: Veröffentlicht
            status: listed


  # seo tab
  seo: tabs/seo

  # blog settings tab
  settingsBlog:
    label: 
      en: Blog Settings
      de: Blog Einstellungen
    icon: book
    columns:
      left:
      - width: 2/3
        sections:
          settings:
            type: fields
            fields:
              categories:
                label: 
                  en: Categories
                  de: Kategorien
                type: tags
                help: 
                  en: Define all categories here. Use lower case for best URL organisation.
                  de: Definieren Sie hier alle Kategorien. Verwenden Sie Kleinbuchstaben für die beste URL-Organisation.
                width: 3/4
                
              perpage:
                label: 
                  en: Articles per page
                  de: Artikel pro Seite
                type: number
                min: 1
                max: 20
                default: 10
                help: 
                  en: Set how many articles are shown per page
                  de: Legen Sie fest, wie viele Artikel pro Seite angezeigt werden
                width: 1/4
              
              sidebarBlog:
                label: 
                  en: Blog sidebar
                  de: Blog-Seitenleiste
                type: radio
                columns: 2
                help: 
                  en: Enable/disable the blog sidebar
                  de: Aktivieren / Deaktivieren Sie die Blog-Seitenleiste
                options:
                  yes: 
                    en: "Enable"
                    de: "Aktivieren"
                  no: 
                    en: "Disable"
                    de: "Deaktivieren"

              sidebarProfile:
                label: 
                  en: Profile Section
                  de: Profilabschnitt
                extends: fields/blogSettings

              sidebarCategories:
                label: 
                  en: Categories
                  de: Kategorien
                extends: fields/blogSettings

              sidebarArchive:
                label: 
                  en: Archive
                  de: Archiv
                extends: fields/blogSettings

              sidebarTags:
                label: Tag Cloud
                extends: fields/blogSettings

              sidebarSocialmedia:
                label: Social Media Icons
                extends: fields/blogSettings

      right:
      - width: 1/3
        sections:
          settingsProfile:
            type: fields
            when:
              sidebarProfile: true
            fields:
              profileTitle:
                label: 
                  en: Sidebar Profile Section
                  de: Seitenleistenprofilabschnitt
                type: headline
                numbered: false
              profileImage:
                label: 
                  en: Profile Image
                  de: Profilbild
                type: files
                max: 1
                layout: cards
                image:
                  cover: true
              profileHeading:
                type: text
                label: 
                  en: Profile Heading
                  de: Profilüberschrift
                maxlength: 50
                help: 
                  en: Short profile title.
                  de: Kurzprofiltitel.
              profileText:
                type: textarea
                label: 
                  en: Profile Text
                  de: Profiltext
                maxlength: 150
                help: 
                  en: Short profile description.
                  de: Kurze Profilbeschreibung.

          files:
            headline: 
              en: Files
              de: Dateien
            type: files
            info: "{{ file.dimensions }}"
            image:
              cover: true

  # article settings tab
  settingsArticle:
    label: 
      en: Article Settings
      de: Artikeleinstellungen
    icon: document
    columns:
      left:
      - width: 2/3
        sections:
          settingsArticle:
            type: fields
            fields:
              sidebarArticle:
                label: 
                  en: Article sidebar
                  de: Artikel Seitenleiste
                type: radio
                columns: 2
                help: 
                  en: Enable/disable the article sidebar
                  de: Aktivieren / Deaktivieren Sie die Artikelseitenleiste
                options:
                  yes: 
                    en: "Enable"
                    de: "Aktivieren"
                  no: 
                    en: "Disable"
                    de: "Deaktivieren"

              sidebarArticleLatestPosts:
                label: 
                  en: Latest Posts
                  de: Neueste Beiträge
                extends: fields/articleSettings

              sidebarArticleCategories:
                label: 
                  en: Categories
                  de: Kategorien
                extends: fields/articleSettings

              sidebarArticleArchive:
                label: 
                  en: Archive
                  de: Archiv
                extends: fields/articleSettings

              sidebarArticleTags:
                label: Tag Cloud
                extends: fields/articleSettings

              sidebarArticleSocialmedia:
                label: Social Media Icons
                extends: fields/articleSettings

      right:
      - width: 1/3
        sections:
          commentsArticle:
            type: fields
            fields:
              commentsSwitch:
                label: 
                  en: Comments
                  de: Bemerkungen
                type: toggle
              commentsCode:
                label: 
                  en: Comments code
                  de: Kommentare Code
                type: textarea
                size: medium
                buttons: false
                font: monospace
                help: 
                    en: Embed comments code added here will be displayed under the every article. 
                    de: Der hier hinzugefügte Code für eingebettete Kommentare wird unter jedem Artikel angezeigt.
                placeholder: 
                  en: Add Disqus or some other embed comments system code.
                  de: Fügen Sie Disqus oder einen anderen Systemcode für eingebettete Kommentare hinzu.
                when: 
                  commentsSwitch: true

You have one sections: too much in there :slight_smile:

      right:
        width: 1/2
        sections:
          commentions:
            type: commentions
            show: pending        

        sections:
          listed:
            extends: sections/articles
            headline: 
              en: Published
              de: Veröffentlicht
            status: listed

should be:

      right:
        width: 1/2
        sections:
          commentions:
            type: commentions
            show: pending        
          listed:
            extends: sections/articles
            headline: 
              en: Published
              de: Veröffentlicht
            status: listed

Yea, that was the solution.

By adding
<?php
// in a page template or snippet
commentions();
?>
to the theme I get the form. Yea again.

1

But of course it still looks pretty ugly. My template comes with a (not used by me) contact form. How can I apply its layout to the contact form?

What should the “please leave this field empty” mean? Is this a honeypot? Why is it displayed?

I would like the input

  • name
  • eMail
  • website
  • comment

Can I adjust it?

See here: https://github.com/sebastiangreger/kirby3-commentions#commentionscss …you can either add the <?php commentionscss() ?> helper in your <header> template to use the included base styles or write your own (i.e. you’d look up the markup rendered by the plugin and write your own CSS for it; it might also be possible to rewrite the theme’s CSS to match the plugin’s markup).

Yes: https://github.com/sebastiangreger/kirby3-commentions#spam-protection - it is displayed because you don’t have the CSS styles applied.

You would usually hide it via CSS (use or see above-mentioned built-in default style for reference); to disable completely add this to your config.php:

'sgkirby.commentions.spamprotection' => [],

Almost anything in the Commentions plugin can be adjusted. To change the fields displayed, see: https://github.com/sebastiangreger/kirby3-commentions#comment-fields

I have added the line in the header.php. Nothing happens.

<!doctype html>
<html lang="<?= $kirby->language()->code() ?>">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <?php snippet('header/head') ?>
  <?php if($site->stylingSwitcher() == "true"): ?>
    <?php snippet('less') ?>
  <?php endif ?>

  <?php if($site->fontURL()->isNotEmpty()): ?>
  <link href="<?= esc($site->fontURL()) ?>" rel="stylesheet">
  <?php endif ?>
  <?= css(['assets/app/dist/css/uikit.app.min.css']) ?>
  <?= css('@auto') ?>

  <?= js('assets/app/dist/js/uikit.min.js') ?>

  <?= js('assets/app/dist/js/uikit-icons.min.js', ['defer' => true]) ?>
  <?= js('@auto') ?>

  <?php if($site->headCustomCode()->isNotEmpty()): ?>
  <?= $site->headCustomCode()->value() ?>
  <?php endif ?>
	
  <?php commentions('css'); ?>

</head>
<body>

<?php if($site->bodyCustomCode()->isNotEmpty()): ?>
<?= $site->bodyCustomCode()->value() ?>
<?php endif ?>

  <div class="page">

  <?php snippet('header/navbar') ?>

Hmm. That is mysterious :thinking:

Does this mean the CSS file does not get included at all? I can’t see any problem with the PHP code you posted; calling commentions('css') the way you do should add this <link> tag to your HTML’s <head>:

<link href="http://YOURDOMAIN/media/plugins/sgkirby/commentions/styles.css" rel="stylesheet">

Or does the CSS get included, but it does not affect the styling of the comment form created with commentions() or commentions('form')? The included CSS is written to work with Kirby’s default Starterkit theme, so may or may not look good with other themes – but the form fields should at least receive bold borders etc.? (Unless there are some CSS rules in your other styles that override the commentions styles.)

Here is my last attempt. Otherwise, I apparently spent uselessly on Kirby license and theme money and use WordPress again in frustration.
Anyone who installs the plugin in the Zero One theme (https://www.getkirby-themes.com/themes/zero-one) can make me an offer.

Thank you.

Have you checked what @sebastiangreger wrote above? I.e. look in the source code if the link tag is included, if yes, check in the network tab if there are problems with loading the file, or check in the inspector if the styles are applied.

That <?php commentions('css'); ?> works without issues in my test version.

But that’s not what @hendrik wants. He wants to integrate it using Zero One classes, it can not be done like that. Commentions snippets must be overridden https://github.com/sebastiangreger/kirby3-commentions/tree/master/snippets to have full integration.

A good amount of work is needed to accomplish that. Many things must be styled, not only forms, but also the comments itself. And modify a comments response workflow a bit, to look good.

I just sent you an offer, @hendrik, if you want me to integrate it completely for you.

Fantastic plugin, @sebastiangreger, by the way, you made it really well, lot of work invested there. :clap:

Hi Guys,
many thanks for the support. @mrfreedom, the author of the theme, has offered his support here and will kindly install the plugin.
Have a nice day!

And here it is :sunglasses:

Commensions plugin is integrated into the Zero One theme.
Because it can serve as a demo for users interested in integration in their projects, check out:

I must say it again, really good work from @sebastiangreger, he made a complete solution.

2 Likes