Creating an Image with Dynamic Text in PHP

As Christmas approaches, many of my friends have begun their countdowns to that wonderful holiday at the end of the year.

One of my friends started her countdown back in August, when she opened up her calendar and had to count the number of days until Christmas and continuously keep track of what day it was and where her count was. I told her that I could spend the 5 minutes to help her out using the power of the internets, and that’s how my Christmas page was born.

Today, I spent a bit more time spicing up the page. It now has a Calvin & Hobbes image that has a bunch of static text, but will update the number of days dynamically.



style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-9705548764325874"
data-ad-slot="6321796284">

To preface: I had no idea how to do this, and found out that PHP has a rather sizeable GD and Image Function library. I used this example to start:

1
2
3
4
5
6
7
8
9
10
11
12
<!--?php 
 
header("Content-type: image/png");
$string = $_GET['text'];
$im     = imagecreatefrompng("images/button1.png");
$orange = imagecolorallocate($im, 220, 210, 60);
$px     = (imagesx($im) - 7.5 * strlen($string)) / 2;
imagestring($im, 3, $px, 9, $string, $orange);
imagepng($im);
imagedestroy($im);
 
?-->

Unfortunately, you can only use some LATIN2 font with imagestring(), and did it fit the style of the Calvin & Hobbes comic I was using, but it was a good start.

In order to load your own font and dictate its size, we can use imagettftext(). I had to include the Comic Sans (Don’t hurt me!) font file in the same folder as the PHP file.

Here is the complete code for my dynamic Christmas image:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--?php 
// Filename: christmas-image.php
 
header("Content-type: image/png");
$string = $_GET['days'];
$im     = imagecreatefrompng("calvin_resolutions.png");
$black = imagecolorallocate($im, 0, 0, 0);
$font = 'comicsans.ttf';
 
$initialX = '153';
$initialY = '35';
$increaseY = '23';
 
$fontSize = '16';
$fontRotation = '0';
 
$firstline = 'What do you mean';
$secondline = 'there are ' . $string . ' days until';
$thirdline = 'Christmas?! What am';
$fourthline = 'I supposed to do until';
$fifthline = 'then? WAIT?! I am';
$sixthline = 'not a patient man!';
 
//imagestring($im, $font, $px, 20, $string, $black);
imagettftext($im, $fontSize, $fontRotation, $initialX, $initialY, $black, $font, $firstline);
imagettftext($im, $fontSize, $fontRotation, $initialX, $initialY+$increaseY, $black, $font, $secondline);
imagettftext($im, $fontSize, $fontRotation, $initialX, $initialY+($increaseY*2), $black, $font, $thirdline);
imagettftext($im, $fontSize, $fontRotation, $initialX, $initialY+($increaseY*3), $black, $font, $fourthline);
imagettftext($im, $fontSize, $fontRotation, $initialX, $initialY+($increaseY*4), $black, $font, $fifthline);
imagettftext($im, $fontSize, $fontRotation, $initialX, $initialY+($increaseY*5), $black, $font, $sixthline);
imagepng($im);
imagedestroy($im);
 
?-->

The positioning of the text is specific to the Calvin & Hobbes image I used, and I made it easier on myself by creating a variable for the X and Y positions as well as the amount I wanted to push the next lines down.

All you have to do now is refer to the PHP file and pass the variables through the URL.

<img alt="" src="christmas-image.php?days=&lt;?php echo $remainingDays; ?&gt;" />

The PHP file will create a PNG that has the updated text. That was pretty simple, no?