John Leavitt over at Hostscope has an excellent Wordpress plugin to convert text to images, “TTFTitles”. Originally it was intended to create images of your special font’ed Wordpress post titles, but you can also create images from text on-the-fly with the <?php the_ttftext( … ) ?> function:
The original plugin had a few drawbacks:
I edited the ttftitles.php file to address 1. & 2. and created a quick and dirty plugin for 3.. You have to rename both files’ extensions to “.php” – ttftitles.php goes into the TTF Titles plugin subdirectory, thinkstorm-ttf.php goes into your plugin root directory. (You will have to activate the newly created “Generate Text To Font” Plugin). Now you can do two things:
“¦¦Hello, World¦heroin¦font_size=16&css_classes=right¦¦” produces the image shown on the right. There are a few issues with this quick and dirty hack:
Have fun!
Update from 2009-06-21
ichael had a question in comment number 7 regarding centering text in the TTF plugin instead of having it “left-aligned”. In my experience, the width of the TTF images is exactly the length of the text. If you want text to be centered, you would have to enclose it in a <div> or <p> or <h1> tag etc. and then center the enclosed TTF image via CSS. In case your image also has a background color, your enclosure tag needs to have that background color as well. So if you’re using my plugin, this helped:
<p style="text-align:center">¦¦Super Header¦¦¦¦</p>
which would then be rendered as:
Also: for compatibility reasons with non-image browsers as well as for Search Engine Optimization (SEO) reasons, you should never render important text (like headings) into images and then not set the ALT tag accordingly. An even better solution is something called “StateScoping” of CSS, shown here:
http://alt.skybound.ca/statescope/
In the upper right corner of the main text content there is a link to switch “scopes”, and you can see the difference between the page rendered with images and without. The example is also somewhat SEO safe, even with images switched on, as the text will still be included in the page and just displaced by CSS.I say “somewhat”, because my latest experience is that Google does interpret the CSS placement for otherwise higher ranking sites to avoid tweaking of sites with SEO code that would never be displayed – such as putting “Nokia, N95, Gizmodo, Samsung, LG, G1, iPhone” within an <div> container that is placed off the screen just so to improve the hit rate on these keywords without actually displaying them :).
