PHP: Dynamically generating images from text

If you’ve visited my site more than once, you might start to notice that the silly little tagline next to the logo in my header changes, in both content and appearance.

This is accomplished by way of a fancy little bit of PHP. The image generation uses the GD library (with FreeType support), and the fonts are all TrueType.

Again, since my Linode didn’t come with anything preinstalled, I needed to install GD first. It seemed like it might be a bit of a pain – the PHP manual page indicates I was going to have to recompile PHP. Fortunately, this was not the case.

I just had to download it from Ubuntu’s package manager…

…and add it to the “extensions” section of php.ini…

…and restart Apache.

Once that’s out of the way, creating the image was remarkably simple – especially since I found a ready-made script that did exactly what I wanted.

The code is pretty long, so hit the jump to see the rest.

Here’s the actual script,  broken down into sections:

First, we tell the browser that this page is a PNG image. This line needs to come before any other code, or else you might start seeing errors.

Next, we create a class with all the values we want to use for our image, except for the font and text.

$transparent tells GD to create a transparent image, so that it can be used against any background. The first set of RGB values indicate the color of the text, and the second set is for the background color, in order to antialias the text. I selected a shade of green in the same area of my header gradient where the text appears, and it blends in pretty smoothly.

Next, we write the function that will actually create the image, starting out with some empty variables. The two variables that are passed to the function ($foo and $font) are going to give us the text to display, and the font file to use.

Now we need to figure out how big the image should be. First, we determine the height of the text based on a capital “W”. This will work for most fonts, but some of the handwriting ones I use in my tagline image have unusually tall characters, so I ended up manually specifying the height (e.g. $font-height = 55;).

Then we determine the width and the vertical and horiztonal coordinates for the bottom left corner of the text. I ended up setting the $height variable to a specific value.

The last bit of our function generates the actual image, using the imagettftext function of the GD library.

Now we set variables based on the values specified in the original class we created.

These next two sections are specifically for my application, with a random tagline and font file. First, we read the text file and create an array, using each line as an array element. Then, we select a random element from the array and set it to a variable. The text file is stored in the same directory as the PHP page.

Second, the directory of fonts is read, and a random one is pulled from the list. You need to make sure to have the ./ before the directory and filenames (assuming your font directory is a subdirectory of your PHP page).

Finally, we invoke the function to create the image, passing to it both the tagline and the font file.

Now, this is a little modified from the original code. The code has the font and text variables set to static values. I wanted my code to randomly select both a font file and a tagline, so I stuck a bunch of fonts in a folder called ttf, and created a file named tags.txt with several taglines.

The ttf directory and tags.txt are both located in the same directory as the PHP file containing this code. Each tagline is on a separate line in the text file, so the loop looks for line breaks to indicate individual taglines.

You can call to the image just like you would any normal image file:

You’ll quickly discover that since IE 6 doesn’t support transparent PNGs, your image won’t look very good. This is easily solved with a little hack that I discovered at I couldn’t get the repeating background feature of the beta version to work properly, but it worked beautifully for this generated image.

IE 7 and up support transparent PNGs natively, so you only need to apply this for IE 6 and 5.5. If you’re already properly identifying the client browser and adding the appropriate stylesheet, this is a breeze.

The possibilities for this script are pretty endless, and it can be tweaked to meet your specific needs. Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *