Schinckel.net

Note: This has been updated to reflect most of the feedback I received from the comments and emails. One of the ways to combat comment spam is to use a Catchpa: or a Completely Automated Turing Test to Tell Humans and Computers Apart. I have implemented one with a simple bit of JavaScript. You need to have two sections of code in your comments.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

    function checkCatchpa()
    {
        var catchpaResponse = document.getElementById("catchpa").value;
            if( catchpaResponse == theAnswer )
            {
                return true;
            }
        return false;
    }
    
    function SubmitComment()
    {
        if (checkCatchpa() == true)
        {
            document.commentform.submit();
        }
    }

This one needs to be inside a <script> block: I have it where I also use a couple of functions to show a comment preview. You will also need to surround the script block with {literal} tags to prevent it from screwing up your template. The next one creates the puzzle. It should go after the URI box in your comment form:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

    <p>
        <input type="text" name="catchpa" id="catchpa" value="" size="28" tabindex="4" />
        <label for="catchpa">{_e text="<acronym title='Completely Automated Turing Test to Tell Humans and Computers Apart'>Catchpa</acronym>: "}</label> 
        <script type="text/javascript">
            var firstNumber = Math.ceil(Math.random()*10); 
            var secondNumber = Math.ceil(Math.random()*10); 
            document.write("What is "+firstNumber+" plus "+secondNumber+"?");
            var theAnswer = firstNumber + secondNumber;
        </script>
    </p>

You will also then need to tell the form itself to call the checkCatchpa() function, rather than just submitting:

1

         <form action="{$siteurl}/wp-comments-post.php" method="post" id="commentform" name="commentform" onSubmit="return checkCatchpa()">

Depending on your setup, you may also need to use the SubmitComment() call on your link or button that actually submits the form.

1

    <a class='button' href='javascript:SubmitComment();'> Post Reply </a>

I’ve tested this and it works: I’ll leave it on my site for a couple of days so you can test it out: if you have any problems, leave a response here (if you can!), or AIM/email me.

Note: this post is now out of date. Go to Gravatars in Blogsome instead. I did get Gravatars working in Blogsome to some extent a while ago, but it exposed the email addresses. What I’ve done now is obscure the email addresses, and it should be safe to use: <script type="text/javascript"> {capture name=reader}{comment_author_email}{/capture} var ob_email = "{$smarty.capture.reader|replace:'@':';'}"; var email = ob_email.replace(/;/g,"@"); document.write('<div class="right"><img src="http://www.gravatar.com/avatar.php?gravatar_id='); document.write(hex_md5(email)); document.write('&size;=50" /><\/div>'); </script> Basically, it grabs the Commenter’s email address, and changes it in Smarty from email@domain.com to email;domain.com - then JavaScript is used to change it back before passing to the hex_md5(); function. You will need to have the following code inserted in your template somewhere before this: <script type="text/javascript" src="/images/md5.jpg"></script> And the file md5.jpg stored on your server, or the following line (using the copy on my server): <script type="text/javascript" src="http://schinckel.net/images/md5.jpg"></script> If you download my version, clicking on the links won’t work: you’ll need to right-click and choose Save…

I’ve implemented Comment Previewing from Blogsome blogs. There is no way to install 3rd party plugins in WordPress MultiUser, so everything has to be done in JavaScript. But really, the plugin is just JavaScript packaged up nice anyway. You need four code fragments, all in your comments.html file. The first one I suggest goes after the line: {if 'open' == $post->comment_status} Because it is a JavaScript that uses { and }, you need to remember the {literal} tags. {literal}<script type="text/javascript"> <!-- function ReloadTextDiv() { var UseInstantPreview = document.getElementById("use_instant_preview").checked; if( UseInstantPreview == true ) { var NewText = document.getElementById("comment").value; splitText = NewText.split(/\n/).join("<br />"); var DivElement = document.getElementById("commentpreview"); DivElement.innerHTML = splitText; } } // --> </script>{/literal} It probably doesn’t matter exactly where it goes, but having it after the {if} clause means it will only be included in the file if comments are open. The second code fragment is: onkeyup="ReloadTextDiv();" And it goes in the <textarea id=comment … > tag. In context, mine is: <textarea name="comment" id="comment" cols="60" rows="12" tabindex="4" onkeyup="ReloadTextDiv();"></textarea> The third fragment is the checkbox for enabling or disabling Comment Preview. It can go wherever looks good. <input onclick='ReloadTextDiv();' name="use_instant_preview" type="checkbox" id="use_instant_preview" value="1" checked /> <label for='use_instant_preview'>Use Instant Preview</label> The final fragment tells the browser where the Comment Preview goes: <div><p id="commentpreview"></p></div> And it goes where you want the Comment Preview to actually go. I suggest just after the Submit button, or other instructions. Righto, all of that in there, and it should work. You may need to add an entry to your Site Style Sheet to make the Comment Preview box look the same as your actual comments box. • If you wanted to, you can also have a Preview button that will preview what is in the text area then, rather than having Live Preview. This is good for a couple of reasons: I find that long comments slow down when trying to update every keypress. The big problem is that you cannot have a normal input field inside the form set to do this, it will just try to submit it (or at least, mine did!). So, I’ve replaced my input tags in my form with the following (You may need to insert name='commentform' into the form start tag.): <a class='button' href='javascript:document.commentform.submit();'> Post Reply </a> <a class='button' href='javascript:ForceReloadTextDiv();'> Preview </a> You’ll also need to add the following in just after the ReloadTextDiv function definition: function ForceReloadTextDiv() { var NewText = document.getElementById("comment").value; splitText = NewText.split(/\n/).join(" "); var DivElement = document.getElementById("commentpreview"); DivElement.innerHTML = splitText; }

Note: The seperate Quicktags toolbar is not supported. Please use the full toolbox script, or hack it any way you like. The remainder of this post remains for posterity only.

•

This was easier than I thought.  Alex King has done most of the work by having the Quicktags info already in a JavaScript file. I just grabbed my copy of the file (from /wp-admin/quicktags.js) and tweaked it.  To upload to the Blogsome server I had to call it quicktags.jpg, but that is allowed, since you tell the browser explicitly that it is a text/javascript file. So, you can get my quicktags.js file (Right-click and download it!), and upload it to your server, and use the following code in your comments.html. Where you want the toolbar to appear, insert this:

1
2

    <script src="/images/quicktags.jpg" type="text/javascript"></script> 
    <script type="text/javascript">edToolbar();</script> 

After the <textarea>, insert the following code:

1
2
3

    <script type="text/javascript"> 
        <!-- edCanvas = document.getElementById('comment'); //--> 
    </script>

Note: you may need to chage the argument of getElementById to whatever your textarea id is. I’ve also tweaked the JavaScript file so it includes abbr, acronym and strike tags, and doesn’t include the tags that aren’t valid for comments.  And I’ve added a button for inserting < and >, but I’m not totally happy with this.  If anyone wants to edit it so it works better (try it out to see what I mean), then feel free.

I’ve also created another version that uses links instead of buttons (since Camino doesn’t render buttons with style, only as Mac-buttons), but it’s not quite as nice: the labels don’t update. Still, if anyone wants to play around with it, you can get it here. Remember to right-click and download it, it’s not really an image!

Next task: Live Preview.

To create an image tag for a Gravatar in JavaScript, for use on Blogsome. Download the md5.jpg file (it’s really a .js file, but we are tricking Blogsome into allowing it to be uploaded), and upload it to your site. Put the following code into your Main Page template (probably in the head section): <script type="text/javascript" src="/images/md5.jpg" /> Put The following code where you want the Gravatar to appear: <script type="text/javascript">document.write('<img src="http://www.gravatar.com/avatar.php?gravatar_id='); document.write(hex_md5("{comment_author_email}")); document.write('&size=20" />'); </script> You can change the size of your Gravatar image with the size=20 part, set it to whatever value you want. Enjoy! **Edit: **Don’t use this code, as it displays the email address to the browser, and then asks it to generate the MD5 fingerprint. This means that a Spam-collector would actually have access to the raw email address. I’ve diasabled the code until I figure out how to get around this…

I found an old entry on Peter B’s site about making text entry areas resizable, and thought I might implement it on my site. It’s not working yet, but this is more of a reminder for me to do it…