creating a dynamic signature image using php
@david3jones
I’m a part of a few forums on the internet and usually I like to have a signature image when I post, something to reference me or my website or maybe some gaming screenshots and stats etc. It all depends on the forum I’m on and their conditions on signature images. A common signature I use is to have a series of 5 or 6 images that just load randomly so i will have a different signature every time its loaded. To do this i create a php file called signature with the following code
<?php
//total number of images
$total = "5";
//image file extension
$file_type = ".png";
//folder relative to script that contains images
$image_folder = "images";
//images range from 1.png to 5.png so lets use 1
$start = "1";
//create a random number between 1 - 10
$random = mt_rand($start, $total);
//set image filename to the random image
$image_name = $random . $file_type;
//output header
header('Content-Type: image/png');
//output image
$image = imagecreatefrompng("$image_folder/$image_name");
imagepng($image);
imagedestroy($image);
?>
In the same folder as this script I create an images folder containing images numbered to 5 for example 1.png, 2.png, 3.png and so on. With this done if you visit the php script in your browser it should just output a random image from that folder. This works great but a unfortunately a lot of forums disallow php files and filenames in uploads and images for security reasons. One thing you can do to bypass this is to mask the php file to look like an image. This can be done using a .htaccess file to rewrite the image with the following code
RewriteEngine On
RewriteRule ^signature.png$ signature.php
This example I masked the signature.php file so that if you visit signature.png in your web browser it will infact show the output from the signature.php file. You can of course do the same with other image extensions just by switching the .png to .jpg for example. This is usually good enough to fool the forums into accepting your image. Another possible workaround which I haven’t tried myself and wouldn’t recommend is to add the image type to be parsed by php. So you could rename your signature.php file to signature.png and then do something like this in a htaccess file
AddType application/x-httpd-php .php .png
Again this is at your own risk and you could be opening other files on your server to attack. Ok so we have this setup but its still kinda boring, so something I like do with gaming signatures is add some statistics or images and text over the random image. Seen as we are using php this is a very simple task as long as you have the GD library installed with your php installation. To add some info to our signature lets add a white bar with some text about ourself. So before the imagepng() line add the following php code
//setup some colours
$white = imagecolorallocate($image, 255, 255, 255);
$whitesemi = imagecolorallocatealpha($image, 255, 255, 255, 60);
$black = imagecolorallocate($image, 0, 0, 0);
$red = imagecolorallocate($image, 165,10,10);
//create our semi transparent white rectangle for text
imagefilledrectangle($image, 0, 0, 600, 20, $whitesemi);
//choose a default php font number 1 to 5
$font = 2;
//write out our text to the image using the font, colour and positions entered
imagestring($image, $font, 25, 4, 'Player Name: ', $black);
imagestring($image, $font, 100, 4, 'Invisible Man', $red);
imagestring($image, $font, 200, 4, 'Rank: ', $black);
imagestring($image, $font, 235, 4, '1', $red);
imagestring($image, $font, 260, 4, 'Points:', $black);
imagestring($image, $font, 305, 4, '999999',$red);
imagestring($image, $font, 360, 4, 'Kills:', $black);
imagestring($image, $font, 400, 4, '99999999999999', $red);
imagestring($image, $font, 500, 4, 'Deaths:', $black);
imagestring($image, $font, 550, 4, 'nevar!', $red);
//lets add an image over it too, create instance of image
$src = imagecreatefrompng('./images/flags/gb.png');
// Copy and merge images together
imagecopymerge($image, $src, 5, 5, 0, 0, 16, 11, 75);
Ok so this will create a pallete of colours that we are using by defining the rgb values we then create our shape using the imagefilledrectangle and our defined colour and then lastly we write on the image and merge in any other images we want. Here is a final example of my team fortress 2 signature, I actually also added another image the tf2 logo to the bottom left of the signature, the code for this is in the final version below.
I tend to use a real live stats xml feed from hlstats or whatever game i like using the php library SimpleXMLElement to parse the data and put it into the text fields easily using code like $stats->kills. You can of course add all kinds of images change the text and use any feature of php to alter the signature however you desire. Here is the full php code
//total number of images
$total = "5";
//image file extension
$file_type = ".png";
//folder relative to script that contains images
$image_folder = "images";
//images range from 1.png to 5.png so lets use 1
$start = "1";
//create a random number between 1 - 10
$random = mt_rand($start, $total);
//set image filename to the random image
$image_name = $random . $file_type;
//output header
header('Content-Type: image/png');
//output image
$image = imagecreatefrompng("$image_folder/$image_name");
//setup some colours
$white = imagecolorallocate($image, 255, 255, 255);
$whitesemi = imagecolorallocatealpha($image, 255, 255, 255, 60);
$black = imagecolorallocate($image, 0, 0, 0);
$red = imagecolorallocate($image, 165,10,10);
//create our semi transparent white rectangle for text
imagefilledrectangle($image, 0, 0, 600, 20, $whitesemi);
//choose a default php font number 1 to 5
$font = 2;
//write out our text to the image using the font, colour and positions entered
imagestring($image, $font, 25, 4, 'Player Name: ', $black);
imagestring($image, $font, 100, 4, 'Invisible Man', $red);
imagestring($image, $font, 200, 4, 'Rank: ', $black);
imagestring($image, $font, 235, 4, '1', $red);
imagestring($image, $font, 260, 4, 'Points:', $black);
imagestring($image, $font, 305, 4, '999999',$red);
imagestring($image, $font, 360, 4, 'Kills:', $black);
imagestring($image, $font, 400, 4, '99999999999999', $red);
imagestring($image, $font, 500, 4, 'Deaths:', $black);
imagestring($image, $font, 550, 4, 'nevar!', $red);
//lets add an image over it too, create instance of image
$src = imagecreatefrompng('./images/flags/gb.png');
// Copy and merge images together
imagecopymerge($image, $src, 5, 5, 0, 0, 16, 11, 75);
$src1 = imagecreatefrompng('./images/tf2.png');
imagecopymerge_alpha($image, $src1, 5, 280, 0, 0, 74, 15, 75);
imagepng($image);
imagedestroy($image);
If you are having any issues with the file not doing what it should be try commenting out the header(‘Content-Type: image/png’) to see any error outputs that may be causing problems. Or if you are having issues visiting the image in your browser using an image extension like signature.png it may be that your webserver won’t allow the htaccess file to work. You can download the files from this example here
David,
Great tutorial for creating custom sigs. Thanks! I am just starting to get into this and am curious how you would make one of the images a link or add alt text to an image with this code.
Again, great tutorial!
This just outputs the raw image to add a link and alt text you would need some html link to wrap around it.
<a href=“http://davidejones.com/" rel=“nofollow”><img src=“signature.png” alt=“This is alt text” /></a>