We wanted to create stylish text images for our page and post headings, but we didn’t want to create them in advance, we wanted them on the fly. This is a tutorial on how we accomplished this using PHP.
Let’s get to it!
You’ll need PHP (PHP: Hypertext Preprocessor) the open source dynamic language the code in our example is written. We won’t elaborate, the internet is full of information reguarding PHP.
You’ll need the GD library, an open source code library for the dynamic creation of images by programmers, typically installed along with PHP. Information on the GD library also abounds on the internet. Check with your host if you are unsure if you have it installed.
A windows font of your choice, for our site we chose a nice font called Agency. Upload a copy of this font onto your server wherever you like, just be sure to change the path/to/the/font to your font’s path in the PHP code.
Determine the colors of your image (in hexidecimal form) for the following: text, background & text-shadow (if wanted). Hexadecimal uses three sets of numbers to represent the Red, Green, and Blue values for a particular color. We chose a blue text, with a white background and a light grey shadow. There are quite a few free color picking programs and websites available, we use ColorPic by iconico.com for all our color needs. It’s freeware and does not include any other unwanted software included in the download package.
Save this PHP code and name the file font.php:
<?php
// Get the text to draw
$text = ($_GET['text']) ? $_GET['text'] : 'oops...missing text' ; //set default text if missing
// Path to the font
$font = '/path/to/the/font/AGENCYR.TTF';
// Get display font size
$size = ($_GET['size']) ? $_GET['size'] : 18.5 ; //set default if empty
// Get display width
$width = ($_GET['w']) ? $_GET['w'] : 100 ; //set default if empty
// Get display height
$height = ($_GET['h']) ? $_GET['h'] : 40 ; //set default if empty
// Create the image
$im = imagecreatetruecolor($width, $height);
// Choose text color
$color = ($_GET[color]) ? $_GET[color] : "black" ; //Image color
switch($color) {
case "black" : $use_color = imagecolorallocate($im, 0, 0, 0); break;
case "orange" : $use_color = imagecolorallocate($im, 255, 159, 64); break;
case "blue" : $use_color = imagecolorallocate($im, 53, 50, 111); break;
case "white" : $use_color = imagecolorallocate($im, 255, 255, 255); break;
}
// Get the top offset
$offset = ($_GET['offset']) ? $_GET['offset'] : 30 ; //set default if empty
// Create the image background
$bgcolor = ($_GET['bgcolor'] == 'white') ? imagecolorallocate($im, 255, 255, 255) : imagecolorallocate($im, 0, 0, 0) ; //set default if empty
imagefilledrectangle($im, 0, 0, $width, $height, $bgcolor);
// Make the background-color transparent
imagecolortransparent($im, $bgcolor);
// Add some shadow to the text if requested
if($_GET['shadow']){
$shadoffset = $offset + 2;
$shadow = imagecolorallocate($im, 220, 220, 220);
imagettftext($im, $size, 0, 1, $shadoffset, $shadow, $font, $text);
}
// Add the text in the color chosen
imagettftext($im, $size, 0, 0, $offset, $use_color, $font, $text);
// Set the content-type and print the image
header('Content-type: image/gif');
imagegif($im);
?>Simply call the dynamic font based image in a generic HTML image tag. Be sure to use the alt portion of the image tag so that if the image generation fails text still appears, not to mention this will aid in SEO.
<img src="font.php?size=18&w=400&h=34&shadow=y&color=blue&bgcolor=white&text=My+Dynamic+Font+Based+Image" alt="My Dynamic Font Based Image" />Some Examples:
How do we dynamically use this technique in conjunction with our site’s code? The text for our images come from the <?php the_title(); ?> call from WordPress. Hence, whatever text is set for the page or post title will be displayed in image form. No need to create static text images for our pages and posts.
<img src="font.php?size=20&w=500&shadow=y&color=blue&bgcolor=white&text=< ?php the_title(); ?>" alt="< ?php the_title(); ?>" />Room for improvement? Why yes there is always improvements that can be made to the code, some or our thoughts include:
- Create an on the fly HEX color conversion based on the $color and $bgcolor variables
- Determine the top offset based on the image height and the font size, allowing all text to align in the center of the image.
- Auto width based on number of text characters. This could be tricky and may require a monospacing (fixed-width) font.
Post your thoughts below…
Leave a Reply