Zem Image Replacement

A Textpattern plugin that dynamically converts text to embedded PNG images using TrueType fonts.

zem_ir (formerly zem_image_replace) replaces text with a PNG image rendered using a TrueType font, and uses CSS to place the image on the page in such a way that the text is still accessible to text-only browsers. It’s similar, in some respects, to SIFR, except that zem_ir uses PNG and CSS where SIFR uses Flash and Javascript.

Because it integrates with Textpattern, zem_ir can be safely used to automatically turn any text into an image – not just a static heading, but article headlines, dates, even excerpts and entire articles (not that we’d recommend that). All images are cached to save bandwidth and minimize server load. In most cases the title images created by zem_ir are very small, often less than 1kb each.

Here’s an example of it in action:

Download the current version: zem_ir-0.5.txt
Online docs: zem_ir documentation
License: GPL.

NB – the plugin name changed with version 0.5. Users upgrading from a previous version will need to manually disable or uninstall zem_image_replace before activating the new version.

Changes:

Version 0.5:

Many additions and improvements, including:

  • zem_ir_set tag for pre-defining default parameters
  • Multiple configuration groups
  • Supports 5 different CSS replacement methods
  • Accurate text rotation
  • padding tag to fix clipping errors
  • Word wrapping
  • Options for capitalizing and stripping text before rendering
  • Safer default parameters


How come your documentation is at version 0.5 and your download is at version 0.4? Also I noticed that the documentation has something about “padding” but the plugin doesn’t have that… Am I missing something here?

James Kahlin    Dec 24, 07:37 am    #

Thanks for the plugin, its great!

Just been customising and hacking it a bit and have added a margin feature (which could also be used as padding etc or any other CSS element).

Feel free to email me (sales@koopd.com) if you want my hacked version of the plugin!

Alistair Holt    Jan 9, 06:51 pm    #

How can I prevent/reduce the huge whitespace after the image-replaced text?

Steve    Jan 24, 09:10 pm    #

Hi Zem,
I just wanted to thank you for taking the time to create a new and improved version of your wonderful image replacement plugin. I think this is the best plugin I’ve ever worked with thus far. It does exactly what I want and I don’t even need any stupid JavaScript or Flash for it to work properly. I also love how it is integrated into Textpattern. Anyway, thank you for your awesome plugin. I hope you have a nice day.

James Kahlin    Feb 3, 03:44 pm    #

Oh, I just thought of a suggestion for the next version(or sooner) of the plugin. I think you should have options to have styles on the generated text. For example: underline, strike-through, bold, italic, etc. Just a suggestion/request.

James Kahlin    Feb 3, 04:05 pm    #

James,

The different styles of TrueType fonts like bold and italic are stored in different files. To use one of those you need to upload the extra files and specify the appropriate font filename.

The PHP image functions provided by GD don’t appear to offer a way of setting attributes like underline or strike.

Alex    Feb 3, 04:12 pm    #

Ah, thanks for the answer…

I just stumbled upon what I believe to be a bug in the new version. I was attempting to use your new method="img" and at first all seemed to be well but then when I looked at the source and validated the page I found a small error. I’m not sure if your aware of it but this is what is getting output when I use that method:

< img src="/images/zir/15f76a3540b6a81f2716220e99a7e840.png" alt="The text" title="The text">The text< /img>
//Remove the spaces...

Although it displays right on the page, it is invalid. I’m not sure if that is valid markup in html but in xhtml(what I’m using) it is not valid. The proper way would be like this:

< img src="/images/zir/15f76a3540b6a81f2716220e99a7e840.png" alt="The text" title="The text" />
//Remove the spaces...

So I’m not sure if that was intentional or if you knew about that but for my particular site it is invalid.

James Kahlin    Feb 3, 05:21 pm    #

You’re right, the “img” markup is invalid. That was a hasty last-minute addition – I made sure it worked, but didn’t think to check the html source.

I’ll include a fix in the next release.

Alex    Feb 3, 05:32 pm    #

Would I be really annoying if I were to ask when that will be? =P

Sorry, I’m just anxious to get the new version working on my site. :)

James Kahlin    Feb 3, 06:03 pm    #

See rule number 1.

Alex    Feb 3, 06:19 pm    #

The flash image replace version should allow underlines, italics etc which are set in your CSS style. This is because they will be rendered in HTML from Flash. You may want to give it a shot or see if zem wants to make an alternate version :-p

— Will    Feb 25, 03:58 pm    #

I keep getting a blank page when I try to use zem_ir…

The debug info is all ok… I’ve seen this problem all over the TP forums, but no solution…

any clues?

Allan Rojas    Apr 16, 12:58 am    #

same here. just a blank page. if anyone knows a solution, please email… thanks in advance.

— schnuck    Apr 18, 04:08 am    #

There is a typo in the style for the “lir”-method.

it reads:
...height /**/: {$height}px;

but should be:
...height: {$height}px;

And it would be good to know how to add a few extra Pixel width for the gererated Image, because with some fonts 2-5 pixel clipping of the last character appears.

— Ingo    Jun 26, 04:58 am    #

i would also like to know how to prevent clipping of the last character. I have not found a font yet that doesn’t loose the last character. Thanks

— are jay    Jun 27, 03:04 pm    #

wouldn’t work for some reason.. :( just shows “h1Title”...

tobey    Aug 19, 12:44 am    #

is there a way to define text-align:center ?

— feragnoli    Mar 12, 02:28 am    #

Thank you very much Zem. You rock!

— Antti    May 20, 12:36 am    #

Commenting is closed for this article.