Please note the information in this entry is now superceded
For the second of my notes on Textpattern conversion, I’m going to cover just one subject : hacking the txp comment system.
Purpose of this hack:
Change the recorded comments to display as <div>’s rather than <li>’s, with alternating background colours and sequential numbering. Change the comment form to allow live previews to be used.
What you need to know first:
Upgrading Textpattern is a simple process, you simply upload all the new files (apart from the config.php file) and load _update.php in your browser to make sure all your database tables are updated. Its so quick. What I’m doing here is hacking the /textpattern/publish/comments.php file – a lot. This means that when you update, you’ll have your work cut out for you.
Still want to do it? Make a backup of that comments.php first, and then read on.
Background:
Textpattern, handles commenting a little differently to systems like Movable Type. A lot of the work is carried out behind the scenes, away from the page templates and forms, making personalisation harder. The comment form is laid out in presentation>forms>comment form, the display of comments is found in presentation>forms>comments. Then, as long as you have the <txp:comments_invite /> tag inside your article form (presentation>forms>default), Textpattern will add these elements together, along with the preview and remember details functions.
Step 1 – Change the existing preview method.
Dean Allen designed txp’s preview-first/submit-last routine to avoid spam flooding. This hack removes that safety net, and allows comments to be submitted directly, but I think this is less annoying for users. If we want to implement live comment previews, we have no choice – it has to go.
Justin Low worked out how to change this situation. Work through his instructions here, and you’re done.
Step 2 – changing the comments to display as <div>’s rather than <li>’s
I wanted to do this in order to have more control over my CSS. The ordered lists add comment numbers without any fancy coding, but restrict what markup can go inside the comment, and how much can be changed with CSS. Changing it to <div>’s gives that flexibility.
Still in /textpattern/publish/comments.php find the following code (around line 34):
f ($darr) {
$out.= '<ol>'.n;
$out.= formatComments($darr);
$out.= n.'</ol>';
}
and change it to:
if ($darr) {
$out.= '<div id="comment">'.n;
$out.= formatComments($darr);
$out.= n.'</div>';
}
then find this (around line 132):
$out .= n.t.'<li id="c'.$discussid.'"
style="margin-top:2em">'.$temp.'</li>';
and change it to:
$out .= n.t.'<div id="c'.$discussid.'"
class="'.$class.'">'.$cno.' '.$temp.'</div>';
There are 2 php values in here, which we’ll use in the next step:
Step 3 – alternating background colours and sequntial numbering
Obviously, I can’t use the MTFlipFlop plug-in here, so I had to find a different solution. There’s also no tag in txp to output a comment number (because it used the ordered lists – which I removed!).
Once you’ve set up your 2 CSS classes for the alternating rows (I’ve used ‘odd’ and ‘even’), find the end of the php function – function formatComments($darr) (around line 75) and insert this code:
// set up div class and numbering
$class=odd;
$cno=1;
These are our 2 values, $class for inserting the div class, and $cno for the sequential comment number. Then, returning to the line where we changed the <li> to a <div>:
$out .= n.t.'<div id="c'.$discussid.'"
class="'.$class.'">'.$cno.' '.$temp.'</div>';
place this after it (but before the closing brace):
// change the values
$cno=$cno+1;
if("odd" == $class) {
$class="even";
}
else {
$class="odd";
}
This adds 1 to number count, and the decides whether the next time it loops, the div class should be odd or even. We’re almost there…
Step 4. Implementing Live Previews
The original post on how to do this can be found here. Now that we’ve done all the changes listed above, we can hard code the comments form.
In presentation>forms>comment form change this tag:
<txp:comment_name_input />
to:
<input type="text" id="name" name="name" tabindex="1"
onkeyup="ReloadNameDiv();" value="<?php echo $aname; ?>" />
and then, back in comment.php, we need to change the <textarea> tag to:
$textarea = '<textarea name="message" id="message"
onkeyup="ReloadTextDiv();" cols="1" rows="1" tabindex="4">
'.htmlspecialchars($message).'</textarea>';
If users have already been on your site, chances are that a cookie has been set, allowing their details can be inserted automatically. By hard coding the name input, we have to do a bit more jiggery-pokery to get this working again. When we changed the <input> tag we added value="<?php echo $aname; ?>". This will output the cookie value into the text field, but we also need to grab the cookie values. To do that, place this somewhere above the form (I put this at the very top of my page template):
<?php
$aname = $_COOKIE['txp_name'];
?>
(Thanks to Justin for that bit). Then, still on that page template, you just need to add the preview div at the bottom, after the <txp:article /> tag:
<txp:if_individual_article>
<div class="odd">preview :<a href="#" id="NameDisplay">
<?php echo $aname; ?></a> on <?php $today=date("d.m.y");
print "$today"; ?>:
<div id="TextDisplay"></div>
</div>
</txp:if_individual_article>
The conditional tags stop the preview being displayed on the homepage where there are a number of articles, restricting it to a single entry page.
Step 5 – Textile preview
If you want to really finish things off, how about implementing Textile parsing in the preview? Jeff Minards javascript solution does exactly that, based on code by Stuart Langridge. Its genius!
You’re done at last. Have a drink, you deserve it!
Tags: code, howto, textpattern
One of the most frequent questions I get asked about my Textpattern setup is how I do change content per article on the journal homepage. The majority of the time I have excerpts of each article with a link to read the full article, but sometimes I have very short articles that are shown in their entirety, and these just have the link for ‘Permalink’. 
Download our vCard