Dynamic Heading Generator - create dynamicly an image of a piece of text
Credits
-
by Stewart Rosenberger
... "Text styling is the dull headache of web design.
There are only a handful of fonts that are universally available,
and sophisticated graphical effects are next to impossible using only standard CSS and HTML." ...
-
Sticking with the traditional typefaces is smart for body text, but when it comes to our headings — short,
attention-grabbing blocks of text — it would be nice to have some choice in the matter.
We’ve become accustomed to this problem and we cope with it either by making the most of the few fonts we have,
or by entirely replacing our heading-text with images.
Most sites that replace text with images do so using hand-made images, which isn’t so terrible when there are a set number of headings,
but it quickly becomes unmanageable on a site that is updated several times per day. However the replacement is performed,
each image needs to be bound to the text it is replacing. That binding usually manifests itself as an <img> tag, an embedded style sheet,
or a custom id attribute. And over time, through layout changes and redesigns, that binding needs to be managed by someone.
We can forget all that nonsense. No more <img> or <span> tags, no more id attributes or wasted time in Photoshop,
and no more messy CSS hacks. Using JavaScript and PHP, we can generate accessible image-headings using any font we like.
And we don’t have to change the structure of our HTML or CSS at all.
View the demo to see Dynamic Text Replacement in action. Then read on to find out how you can add the same functionality to your site.
PHP
This small PHP script (available here)
will deliver a dynamic PNG image to our browser whenever it’s asked to.
Before we set it to work, though, it needs to be customized for your specific purpose. The first seven lines of code in the script serve this purpose:
$font_file = 'font.ttf' ;
$font_size = 56 ;
$text_color = '#ffffff' ;
$background_color = '#000000' ;
$transparent = true ;
$cache_images = true ;
$cache_folder = 'cache' ;
- - The $font_file variable must be set to the local path (not the URL) of a True Type (TTF) or Open Type (OTF) font on your web server.
This is the font that your images will be created with; you’ll need to upload it to the web server from your own computer.
- - $font_size, unsurprisingly, refers to the size of the font in points.
- - $text_color and $background_color are hexadecimal color codes that indicate the color of the text, and color of the image’s background, respectively.
- - When $transparent is set to true, the edges of the image’s text will be blended with the $background_color to prevent anti-aliasing,
and the actual background color will be entirely invisible.
- - By setting $cache_images to true, and $cache_folder to the local path of a writable directory on your web server,
this script will save each image that it creates, caching them for later use. This can significantly speed up delivery of images to your visitors,
and is particularly important on shared, or high-traffic servers.
To install this script, upload it to a web server that is configured with PHP support.
Specifically, you will need PHP version 4.3 or higher, compiled with support for the GD graphics library, 1.6 or higher.
If none of that means anything to you, email those requirements to your web host and they’ll tell you if your server is compatible.
Although we used PHP to construct the images in this implementation, your website does not need to be actively using PHP to take advantage
of this technique. Regardless of how you generate your HTML pages, whether they’re edited by hand or through a CMS, you can use this technique
as long as you can insert a <script> tag into the <head> of your documents. I’ll explain that detail further, below.
Please note that what can be done with PHP can often be done with other tools as well. Perl, ASP, Java servlets, and other server-side
programming languages would also be good candidates for generating custom images. PHP is an excellent choice because of its wide availability,
platform independence, and easy learning curve. Consider the alternatives if you require something that PHP doesn’t provide
or if you choose to create your own image-generation code from scratch. It might be simpler, however, to just adapt the PHP code presented here.
One thing that our customization of the script did not include was the text that it should use to generate our custom images.
That’s because the text that we’re using to produce these images will be passed to the script via its URL.
For example, loading the URL heading.php?text=URLs%20Are%20Fun will produce a graphic that reads “URLs Are Fun.”
And they are. But we’ll never need to write them ourselves, because JavaScript will do it for us.
Acknowledgements
Peter-Paul Koch, for his
JavaScript Image Replacement technique
Simon Willison, for this
getElementsBySelector function
Stuart Langridge, for unobtrusive JavaScript techniques
Modifications
- I made a function of the main part of the script, so the vars can be delivered somewhat easier. Also I think it's somewhat more efficiënt this way.
- I added var $imgext so you can choose to use png, jpg or gif without changing the js.
- Also made a small modification on handling the transparent background.
Php-file
Open my altered
makefont.txt and save it where you want as
makefont.php
To use
- imgname is the name of the image without the extension
- png, or jpg of gif
- 25 - fontsize
- #ff9900 - font color
- #666666 - background color
- transparent background y or n
- Save your font.ttf in the imagefolder
include("path/to/makefont.php");
ImgFont("path/to/imagefolder/", "imgname", "png", "your text", "25", "#ff9900", "#666666", "y", "verdana.ttf");
