See Image Replacement In Action (Beta 3)!

I’ve added the latest .IR (see part 1 and part 2) to my site to showcase it. You will see all blog post titles and article titles in Caflisch Script Web Pro.

I’ve done more debugging of the issue with a progress bar in Internet Explorer. It turns out the image handler does its job just fine. If I place an image and link it straight to the image handler IE gets it just fine. However, once an image is placed inside a heading on the fly IE has a problem with it. As I’ve mentioned before, Mozilla and Opera handle it correctly.

The following code forces IE to repaint the heading:

if(UA.bIsKHTML || UA.bIsIE){
 node.innerHTML += "";
}

Obviously, it works fine with an embedded Flash, but not with a dynamically added image. If you comment out these two lines, headings won’t repaint and you’ll be seeing the original text. I’m still trying to find a workaround for images. Would appreciate help with it.

Image + Anchor = Image

As GW would say, "The man is doing fuzzy math." The code published by Mike Davidson replaces headings with Flash. Flash allows interaction. Images don’t. Therefore, if a heading is also a hyperlink, a different approach needs to be taken for images. For now, I’m running a RegEx and stripping away the hyperlink. Down the road I want to make these images clickable by preserving hyperlinks.

Cache Me If You Can

I’m still debating if caching dynamic images is a good idea. When you edit a post, headings might change and you’ll end up with a bunch of cached, unclaimed images. Sliding cache expiration would help get rid of unused images, though. Besides, once you post, you probably don’t change titles.

Anyway, Beta 3 source code is available for download. Have fun!

Update: I take it back! If I do comment out the mentioned three lines, the progress bar goes away. It seems IE doesn’t appreciate a forced refresh when it comes to images. Go figure.

The cache issue: simply save the actual text input and the path to the cached image output in a database and on request check that the text input equals the image, if not recreate.

The repaint hack was necessary for IE SP2, as it wouldn't render the embed, or it didn't load or something like that (Mike tested it). The hack will still be needed for Safari as it has trouble repainting the page after DOM modifications.

Mark, I agree, that hack is needed. I was wondering if there's another one for refreshing images in IE.

Check your print perview as the image is included aswell as the title text messing up the top of the print page.

Good point! Fixed.

This is great, been using it for months with no issues! Are there any outstanding issues that would warrant a final release?

Thanks for the RSS subscription as well, enjoying it so far.

I based my code on an early beta of Flash Image Replacement, and since then Mike Davidson published a 2.0 release. I believe most changes were about Flash, and not so much JavaScript, but I'll verify it again. Other than that, I've been using Beta 3 of .IR myself.

Hi, as anyone done any work in the leading/line spacing arena? as i have a font with large amounts of line space for some reason so would like to counter act it.

Also, someone mentioned a tweak to make it support tranparencies and was wondering if they could show us how they had done it?

Many thanks

Hi Milan, have you updated this code at all since beta 3, i'm using it as is but have just found a small bug. If the text has an ampersand for instance it is urlEncoded but it is not decode prior to adding it to the alt text

David, no I haven't made any updates because everything has been working nicely. Thank you for heads-up, though! I'll make this change.

Thanks, i've edited the js and added a urlDecode method, not sure this is the best method but works okay

function urlDecode (sText)
{
sText = sText.replace('%25', '%');
sText = sText.replace('%2B', '+');
sText = sText.replace('%26', '&');
sText = sText.replace('%22', '"');
sText = sText.replace('%23', '#');

return sText;
}

Milan, are you aware of any way to alter the line height of the image? We are using the Minion font and the line height seems huge by default when the text wraps more than 1 line

Unfortunatel, I don't. :(

I mean, I'm not. :)