Today, I will show you how to make a dynamic signature image in PHP!
One of the main features on message boards are to have your own signature composing of text or a simple image displaying something you wish to show. Putting text quotes there are a popular option for some people and it may be a witty remark, something funny someone said or even something silly you wrote on here.
Sometimes quotes are worth collecting, and you would want to be able to display more than one without taking up too much room, but how can you do this? It isn't easy changing your signature daily or hourly to keep content on it fresh.
This is where PHP can come in handy! And I will show you the basics on how to display an image that can contain anything you'd wish dynamically all contained in one image file.
Begginings of the script..
Alright so here we are, the script runs with no errors and!?Code:<?php
// Path to our font you wish to use, Note you will need a font first!
$ttffont = './arial.ttf';
$fontsize = 10;
// An array of quotes
$arrQuotes = array(
'"Happiness is good health and a bad memory."- Ingrid Bergman (1917-1982)',
'"Give a man a match, and he\'ll be warm for a minute, but set him on fire, and he\'ll be warm for the rest of his life."',
'tigerranter23: "How do you count words in a input box?" I usually use my fingers, if I run out of fingers... it probably wasn\'t that important anyways.',
'aion7@forums.xkcd.com: If all else fails, play Thriller, and dance. With any luck the zombies will not be able to help themselves.',
'Cv: Stop pirating things or look at pron and I guarentee you that 99% of your "Windows" issues will go away.');
// And now we need a random selection:
$choice = array_rand($arrQuotes);
// We can get the quote and wordwrap
$quote = wordwrap( $arrQuotes[$choice], 80);
// Create the bounding box of the image:
$bounds = imagettfbbox($fontsize, 0, $ttffont, $quote);
// And we do some simple math to calculate the coords.
$width = $bounds[4] - $bounds[6]; // Top right 'x' minus Top left 'x'
$height = $bounds[3] - $bounds[5]; // Lower right y minus Lower left 'y'
//5 px padding for later
$space = 5;
// Create the true color image:
$image = imagecreatetruecolor($width + $space, $height + $space);
// Now we choose the colours for the background/foreground (text) we wish to use:
$colors['bg'] = imagecolorallocate($image, 255, 255, 255);
$colors['fg'] = imagecolorallocate($image, 51, 51, 51);
// And fill in the background with the color:
imagefilledrectangle($image, 0, 0, $width + $space, $height + $space, $colors['bg']);
// To add some spacing we simulate the upper edge based on the font size and write the text!
$x = $space;
$y = $fontsize + $space;
imagettftext($image, $fontsize, 0, $x, $y, $colors['fg'], $ttffont, $quote);
// The next following steps are what we call the "magic" of the PHP document.
// We tell the browser, "This document is a PNG!" and the browser accepts it as an image.
// So if all goes to plan, We will see results after here:
header('Content-type: image/png');
imagepng($image);
// And finally remove the image from memory as it's not needed:
imagedestroy($image);
?>
If you've got the font installed in the font path and there are no errors, try opening up your page and if GD is correctly installed and all you will see the quotes perfectly!
So, back to the signature buiseness. You are allowed to place images inside your sig, so lets go around and enter this:
Or in HTML you can simply do this as well:Code:[img]http://foobar.com/images/quotes.php[/img]
And it should come up with a dynamic signature each time the image is viewed. Here is the result of the code in this tutorial:Code:<img src="http://foobar.com/images/quotes.php"/>
Note you can enter as many quotes into the array as you wish, including generated content such as someone's IP, browser. The possibilities are endless, but I will leave that up to you.
Have fun and if you need help on anything, Post in a comment!
(And feel free to add to my rep if you found this useful)
Thank you,
Nullw0rm.
Be sure to read the updated FAQ || Health is achieved through 10,000 different steps.
A textual description can be only part of your question, be sure to provide sample results, errors and your platform in the appropriate forums while asking.
Very interesting tutorial man, would there be a way to make that text a link inside the PHP code? I know you can simply link outside the [img] tags or the html tags, but can you make it link to lets say your website within the php code?
Also one other question: you know how some forums have a limited size for a signature picture, would this method be a way to actually have different images smaller then the max size and still have different images? Can you link with the images?
Oh and another question: can you make it chage every 10 seconds lets say or does it only change after a refresh or a new page?
-ND
The reason this could show different contents is that each time the signature is loaded it loads the image which is your PHP page. The PHP code creates the image on its server and it will be showed in the signature.
- Question 1 won't work since the PHP can only return an Image, if you wanted it to return anything else it won't work at all.
- I can't really answer your question 2 since I'm not exactly sure what you mean.
- Question 3 won't work since the page loads the image when the page loads, there's nothing that can make it change thereafter. And I would be very surprised if there was a forum which allow JavaScript in signatures since that would allow people to ruin the whole forum.
It's simply an image as you're calling it through [img][/img] tags so you cannot have it do anything special such as refresh automatically, you'd need HTML to do this. As for your link question you'd have to wrap it in url tags, as it's a generated image it can't do anything special, just be dynamic!
I'm not quite sure what you mean about the max size, if you view the code it's set to a maximum of 80 characters before it wraps, then goes down font size (10px) + 5px spacing each line. As characters are generally the same size (especially if you use a fixed width font) you can of course change the wordwrap limit to something smaller if forums require a X by Y size.
EDIT: Vswe posted before me!
Be sure to read the updated FAQ || Health is achieved through 10,000 different steps.
A textual description can be only part of your question, be sure to provide sample results, errors and your platform in the appropriate forums while asking.
I have to spread some +rep around before I can give some more to you. Still a good tutorial though
Edit: I spread it around![]()
Last edited by Guest; 06-25-2010 at 07:40 PM.
Root Beer == System Administrator's Beer
Download the new operating system programming kit! (some assembly required)
+rep, this thing is friggen awesome, I used your idea to show people's ips with a smaller fontThanks!
There are currently 1 users browsing this thread. (0 members and 1 guests)
Bookmarks