wordpress

...now browsing by category

 

WP Post Thumbnail IE Error

Monday, September 14th, 2009

I just finished rebuilding Fighters.com and used WordPress for the whole thing which was a new experience for me. I hadn’t done any real work customizing before and it’s a really interesting design. The documentation isn’t quite what I’d like it to be but I was able to figure out everything eventually.

One particularly vexing issue was with the plug-in WP Post Thumbnail which gives you a ridiculously convenient way to add thumbnails to each post (Note that I intentionally linked to the older version because I like the interface a lot better). When you add/edit a post, you can upload an image right there and crop/scale it to different, configurable dimensions before adding it to the post. It was perfect for what I needed it for except the admin didn’t work in IE.

When IE tries to load a post edit page with WP Post Thumbnail enabled, it gives the very helpful:

Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322)
Timestamp: Mon, 14 Sep 2009 23:23:31 UTC
Message: Invalid argument.
Line: 12
Char: 12949
Code: 0
URI: http://www.fighters.com/wp-admin/load-scripts.php?c=1&load=jquery,utils,editor,quicktags&ver=33f9a1c72519a04d2fd7dd5a26c9ec8d

If you track down character 12,949 on line 12, it’s jQuery code that I believe is several functions inside an attr call. However what the exact problem is at that point eludes me. It’s trying to set variable[zIndex] = null; and I fail to see an invalid argument in that.

Now IE8 actually has a pretty nice js debugger but apparently it can’t stack trace code that was dynamically added to the page using jQuery.load, which of course this was, so I couldn’t see what has actually making the attr call. All I could figure out to do was put alert() messages all over all the dynamically loaded files and I eventually tracked it the offending call to this line in plugins/wp-post-thumbnail/wppt_repository.php:

jQuery('#bigimg').imgAreaSelect({hide:true});
I soon discovered that any call to imgAreaSelect threw the same error.

Looking for the source to that function, I found it within the imgAreaSelect Library which came with WP Post Thumbnail. The version that came with WP Post Thumbnail is v0.5.1 but if you go the imgAreaSelect site, you can get v0.9.1 (as of this writing).

Download the new imgAreaSelect code, unzip it, drop the .min.js file in your plugins/wp-post-thumbnail/js folder, add the css of your choice to plugins/wp-post-thumbnail/css/wppt-admin.css (if you choose the animated one, copy the images into your css folder too), and lastly, update plugins/wp-post-thumbnail/wppt.php’s wppt_js() function to have the correct path to your new imgAreaSelect js file. Presto! WP Post Thumbnail will be fully functional in IE.

At least that fixed it for me 😛