0

Modx & Blogging part 8: Equipping Comments


21
Nov


Modx, Quip, Comments, Articles

After getting the blog container template (ArticlesContainerTemplate) looking how I wanted and applying that to the SearchResults template and the individual blog postings template (ArticleTemplate) I realised that the Comments subsystem needed some attention. That's the topic of this post.

Commenting is driven by the Quip add-in and Articles provides a wrapper for it. Like SimpleSearch, all the chunks are hidden and can be found in the core/components/quip/elements/chunks directory.

Hidden Quip chunks

The first thing I did was make copies of many of these and add them to the resource tree. Next, I modified the Comments settings under the Articles Advanced Settings to point to the new chunks. A picture might help clarify this:

Modified settings for new chunks

Changing the Comments form

Basically, I wanted to get from this:

Original 'Add Comments' form.

to this:

Modified 'Add Comments' form

In summary, these are the steps involved:

  • Make a copy of the Quip chunks (as described above)
  • Edit the rg.QuipAddCommentTpl chunk to remove the Web Site field as well as the default values for the Name and Email fields
  • Re-style the form

Edit the rg.QuipAddCommentTpl chunk

After removing the unwanted elements the chunk should look like this:

[[+preview]]
<span class="quip-success" id="quip-success-[[+idprefix]]">[[+successMsg]]</span>

<form class="forms" id="quip-add-comment-[[+idprefix]]" action="[[+url]]#quip-comment-preview-box-[[+idprefix]]" method="post">
<div class="quip-comment quip-add-comment">
  <input type="hidden" name="nospam" value="" />
  <input type="hidden" name="thread" value="[[+thread]]" />
  <input type="hidden" name="parent" value="[[+parent]]" />
  <input type="hidden" name="auth_nonce" value="[[+auth_nonce]]" />
  <input type="hidden" name="preview_mode" value="[[+preview_mode]]" />

  <div class="quip-fld">
   <label for="quip-comment-name-[[+idprefix]]">[[%quip.name]]:<span class="quip-error">[[+error.name]]</span></label>
   <input class="text-input" type="text" name="name" />
   <br />
  </div>
  <br />
  <div class="quip-fld">
     <label for="quip-comment-email-[[+idprefix]]">[[%quip.email]]:<span class="quip-error">[[+error.email]]</span></label>
     <input class="text-input" type="text" name="email"  />
     <br />
  </div>
  <br />
  <div class="quip-fld">
     [[+unsubscribe:default=`
     <label for="quip-comment-notify-[[+idprefix]]">[[%quip.notify_me]]:<span class="quip-error">[[+error.notify]]</span></label>
     <input type="checkbox" value="1" name="notify" id="quip-comment-notify-[[+idprefix]]" [[+notifyChecked]] />
     `]]
  </div>
  <br />
  <div class="quip-fld recaptcha">
    [[+quip.recaptcha_html]]
    <span class="quip-error">[[+error.recaptcha]]</span>
  </div>
  <br/>
  <p><span class="quip-allowed-tags">[[%quip.allowed_tags? &tags=`[[++quip.allowed_tags:htmlent]]`]]</span>[[%quip.comment_add_new]]<span class="quip-error">[[+error.comment]]</span></p>
  <textarea class="text-area" name="comment" rows="5">[[+comment]]</textarea>
  <br />
  <button class="button blue" type="submit" name="[[+preview_action]]" value="1">[[%quip.preview]]</button>
  [[+can_post:is=`1`:then=`<button class="button blue" type="submit" name="[[+post_action]]" value="1">[[%quip.post]]</button>`]]

  <br class="clear" />
</div>
</form>

Re-style the form

This is where things get interesting...

Quip has its own stylesheet. It is found in the assets/components/quip/css/ directory and is injected into the page at the end of the <head> section like so:


</head>

Fortunately, it can be removed in Articles. Go to the Advanced Settings tab, and under --Display there is a "Use Quip CSS" field. Change this to No and the stylesheet will disappear - along with all the styles. To get them back and to be therefore able to change them, make a copy of /assets/components/quip/css/web.css and put it in your own styles directory. I called mine quip.css and included it along with my other styles.

This is not an ideal solution because you are adding an additional stylesheet and lots of code that you may not need. But it is probably better than the alternative, which could lead to difficulties over time as both Articles and Quip are upgraded. You may decide to integrate it differently...

So after tweaking the styles in quip.css I have the form looking the way I want it.

Email settings

Once you start testing, you will discover that any emails that are sent will come from [Quip] - which is pretty meaningless - so this needs to be changed as follows:

  1. Go to the System menu and click on System Settings. Change "core" to "quip" in order to see the settings related to the emails that are sent to your commenters.
  2. Change From Email, Reply-To Email, To Email as appropriate (click the + symbol to see a description of each).
  3. Change From Name for Emails to a name that reflects your blog.


Changing the subject and body of the automated emails

The default subject and body of the automated emails have [Quip] in the subject line and the sign-off of the email which is also pretty meaningless.

These can be altered by changing the Lexicon settings as follows:

  1. Go to the System menu and click on Lexicon Management.
  2. Select Namespace = quip and Topic = emails.
  3. Change the email templates as you find appropriate (double click on each and modify the html displayed).


Add a Comment