Gravatars in JavaScript for Blogsome

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…

Connections Template

I’ve put the current contents of my template files up on this page. You’ll always be able to find the latest version of my templates there.

JavaScript in Posts

Clearly, this is the first time I’ve tried to do this. No, that’s not quote true. I’ve been working on a post that does it, I just haven’t published it yet. I’ve discovered that JavaScript is really neat for doing lots of cool stuff. However, WordPress has a couple of issues with it. It’s okay to use JavaScript in template files, or include external JavaScripts, and even to use JavaScript in Pages, but if you try to use it in Posts, it fails. It converts “ into &quot;, and ‘ into &apos;. Or more strictly, into the #8220;-ish version. Which isn’t much good, as then any JavaScript which uses quotes, to define a string, for instance, will not work. You could define a function elsewhere, and then just call it, that should work. But not do anything that requires quotes. There seem to be a couple of WordPress workarounds, but not in WordPress-MU. Or Blogsome, that means. I may have a look at the source, to see if I can figure out a way to make it work nicer. Oh, and that reminds me. I need a decent text editor for Windows. Notepad just ain’t cutting it anymore. Especially if I try to open a Unix file.

Better Quicktags

Some time ago, I wrote a replacement script for the Quicktags that are present in the Blogsome backend. It seems that they have been implemented! You now have the ability to put <abbr> and <acronym> tags into a post, quickly and easily. Also, it’s possible to get the characters < and >, without having to remember what they look like. Try it out!

New Script Online

Note: there is a newer post you should read instead of/as well as this one: Updated Toolbox Scripts. I’ve finished the Mozilla part of the new script: I think there’s some issues with Internet Explorer, and Safari, but I’ll work on those over the next week. You can use the script by including the following code in the head section of your main page template: <script type="text/javascript" src="http://schinckel.net/images/toolbox.jpg"></script> And then, where you want the following tags, enter them: <!--quicktags--> <!--catchpa--> <!--commentpreview--> <!--resize--> If you put the following inside your comment area, a gravatar will appear for each commenter: {capture name=reader}{comment_author_email}{/capture} <div class="gravatar">{$smarty.capture.reader|encode:"hex"}</div> There’s also the functionality to change post and comment times to a more human readable form: <span class="post_time"> Posted at: 12:34pm</span> Comment times are a bit more difficult: they require a time difference. Getting this on Blogsome is cumbersome at the moment, so I’ll write up a better way of doing it later. At the momement it uses the value obtained through a complicated {Smarty} expression. If you are really desperate, you can find this expression elsewhere on this blog, and put it into a tag as follows: <span class="timesince"><!--{$since}--></span> I’ll write it up so you can just put in <!--{the_time d="U"}-{comment_date d='U'}-->, but that won’t be for a day or so. The other feature I have added is automatic: I’ve got seperate Comments & Trackbacks, and the script will automatically hide whichever one is empty, if the other one isn’t. I will write up a way to seperate Comments & Trackbacks using DOM management, but, again, not right now. Finally, all of the stuff on this page could seriously screw with your template/browser. It is still in beta, and doesn’t work at all in some browsers. I did kill a bug that caused a hang on Firefox Mac, but there may be more of them. Make sure you have a backup of your template, and don’t do this unless you know how to fix it up…

Quicktags Update

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. • I’ve combined my two quicktags scripts into one, it now has an (optional) argument to the edToolbar(); function. If you pass it the argument of ‘Link’, then it will render the toolbar as a series of <a href="javascript:..."> links, rather than the buttons that it defaults to. You can get it from here. Or use the code <script type="text/javascript" src="http://schinckel.net/images/quicktags.jpg> </script> <script type="text/javascript">edToolbar(); </script> in your page, where you want the toolbar to appear, and <script type="text/javascript"> edCanvas = document.getElementById('comment'); </script> after the TextBox you are using to have comments in (make sure it’s id is comment, or change the second script.

Simplest Spam Comment Killer

There are two main tasks that are required to implement a Comment Spam Protection system. The first is to disable comments for all people. The second is to enable it for people who legitimately want to comment. A very simple way to solve the first task is to remove the action from the form tag. In my template, the code looked like this:

1    <form action="{$siteurl}/wp-comments-post.php" method="post" 
2        id="commentform" name="commentform">
3    ...
4    </form>

(Obviously, I’ve removed most of the code for brevity.) Deleting the contents of the form action works to a certain extent, except it creates invalid code. Another option is to replace the action with another URI, such as http://www.google.com. The second task is to re-enable it where appropriate. Since most Spammers use an automated system of some sort to generate comments, and these bots don’t use JavaScript, we can just write a JavaScript that puts the right value back in. This will prevent a user who has JavaScript disabled, or who is in an old browser, from leaving a comment. I’m prepared to live with this. Anyway, I don’t usually add script tags directly into a page, but in this case I will, just to make it easier. After the close of the form tag, insert the following:

1    <script type="text/javascript">
2        document.forms[0].action="{$siteurl}/wp-comments-post.php";
3    </script>

Of course, if this isn’t the first form in your document, for example your search form appears in the source before this one, then you’ll need to change the number of forms[_x_] accordingly. You could try using document.getElementById("commentform").action, but I think there’s an issue with this method not being available until the DOM is complete, which it isn’t at this stage.

Toolbox Script Issues

This is more of a personal note, rather than a blog post, but still…

  • timemods.js parts do not work in IE 5.5
  • quicktags.js does not remove some text (as required) in IE 5.5
  • floater.js has some issues with IE - clicking the shrink/grow checkbox when not at the top of the page is buggy. It then moves the box down too far, and keeps moving it down when scrolling
  • In IE, the buttons are too wide. This might actually be a CSS issue, rather than a script issue.

Unfortunately, I don’t have an installation of IE 5.5 to figure out why the first one is so. I’m not that worried about it as it is a modification that can be lived without. Ditto for the second: it just removes the info about what tags are acceptable, and the buttons are just for these. The third one is the one that annoys me - I spent a fair bit of time getting the floater code to work properly, and I thought I had ironed out all of the bugs. It’s also very frustrating that IE doesn’t respect the position:fixed CSS attribute. That makes everything so much easier. (I think this is the section with the code bug. It may not be an IE specific bug, but since IE is the only browser that actually uses the object.makeFixed(); method, it’s the only browser that displays this bug). The final one may have something to do with Installed Fonts. I’m not that sure. And since in general text is a little too wide in IE (such as in the sidebar, where some stuff wraps onto a second line) this looks to be the case.

DOMContentLoaded and Safari

Often, you will want some scripts to run when the page has loaded, even if the images on it haven’t. I wrote up some stuff about this under Best pre-onload. My full onDOMReady script looks like:

 1    //Main Startup Code
 2    
 3    function checkDOM(){
 4        if (document.getElementById("footer")
 5         || document.getElementById("credit")) 
 6            Startup();
 7        else
 8            setTimeout("checkDOM();",100);
 9    }
10    
11    if (document.addEventListener)
12        document.addEventListener("DOMContentLoaded", Startup, null);
13    else 
14        setTimeout("checkDOM();",100);

However, Safari will not load pages that use this, since it has document.addEventListener, but does not create DOMContentLoaded events. So, I had to create a nasty little browser check rule:

1    if (document.addEventListener && (navigator.vendor != "Apple Computer, Inc."))

I’d rather not have to do things like this. Why not?

Quicktags for Comments

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    <script src="/images/quicktags.jpg" type="text/javascript"></script> 
2    <script type="text/javascript">edToolbar();</script> 

After the <textarea>, insert the following code:

1    <script type="text/javascript"> 
2        <!-- edCanvas = document.getElementById('comment'); //--> 
3    </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.