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 parameterspadding tag to fix clipping errors
3 February 2005, 12:41 by Alex ·
Commenting is closed for this article.
— James Kahlin Dec 24, 07:37 am #
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 #
— Steve Jan 24, 09:10 pm #
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 #
— James Kahlin Feb 3, 04:05 pm #
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 #
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 #
I’ll include a fix in the next release.
— Alex Feb 3, 05:32 pm #
Sorry, I’m just anxious to get the new version working on my site. :)
— James Kahlin Feb 3, 06:03 pm #
— Alex Feb 3, 06:19 pm #
— Will Feb 25, 03:58 pm #
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 #
— 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 #