- Thursday, 8th May 2008
One of the more useful features of the ADDT toolbox, is the ability to easily implement a CAPTCHA on any form at the click of a button. Unfortunately, everytime the CAPTCHA is used, it just the same style anf format. Nothing different.. White background with black dots, same style of font and a variety of font colors.

Pretty bland dont you think!?
This tutorila should hopefully allow you to customize your CAPTCHA in anyway you it. We first need to locate the captcha folder. You can find this in the "includes/common/lib/" folders of your site root. Within the CAPTCHA folder, there is:
- a fonts folder - this the folder where you can add other different fonts
- captcha.png - this basically is the background image to the CAPTCHA. You can create your own using Adobe Fireworks or any other paint/illustration package.
- KT_Captcha.config.php - this file allows you to define where you the rendered CAPTCHA file to be created. At the moment, it is set to "includes/common/_temp".
- KT_Captcha.php -
- KT_CaptchaImage.class.php - this is where magic happens. All aspects on formatting/configuring the CAPTCHA are laid out here.

Warning: Before you start tinkering with the file in the CAPTCHA folder, make sure you have a backup.
Anyway, we can ignore both KT_Captcha.config.php and KT_Captcha.php. We will not need to be editing these. Double-click on KT_CaptchaImage.class.php to open it. Please be advised that with this tutorial, I am assuming that you have the PHP GD Library enabled and that it's the one you are using for your imaging functions.
This is the code that we are particularly interested in:
// with gd if ($this->lib == "gd") { $arr["GD Version"] = 'GD not available'; if (function_exists('gd_info')) { $arr = gd_info(); preg_match("/(2)\.[\d]+/i", $arr["GD Version"], $matches); } if (!isset($arr) || !isset($matches[1]) || (int)$matches[1] < 2) { $error = KT_getResource('PHP_GD_VERSION_ERROR', 'Captcha', array($arr["GD Version"])); return $this->formatError($error); } $im = imagecreatefrompng(dirname(__FILE__).'/captcha.png') or $error = KT_getResource('PHP_GD_ERROR', 'Captcha', array()); if (isset($error)) { return $this->formatError($error); } $string = $this->getTextCaptcha(); $font = imageloadfont(dirname(__FILE__)."/fonts/Courier.gdf"); if($font === false) { $font = 5; } $fontFileName = dirname(__FILE__).'/fonts/MyriadWebPro.ttf'; $wFont = 25; $hFont = 25; // write the letters for ($i=0; $i($string); $i++) { $color1 = rand(0, 64); $color2 = rand(0, 64); $color3 = rand(0, 64); $text_color = imagecolorallocate($im, $color1, $color2, $color3); $okttf = false; if(function_exists('imagettftext')) { $okttf = @imagettftext($im, 14, rand(-25, 25), 10+$i*$wFont, $hFont+rand(4, 26), $text_color, $fontFileName, $string[$i]); } if ($okttf === false) { $fim = imagecreatetruecolor($wFont+9, $hFont+9); $back = imagecolorallocate($fim, 255, 255, 255); imagefilledrectangle($fim, 0, 0, $wFont+8, $hFont+8, $back); $transparent2 = imagecolorallocate($fim, 255, 255, 255); $text_color = imagecolorallocate($fim, $color1, $color2, $color3); imagestring($fim, $font, 4, 4, $string[$i], $text_color); if(function_exists("imagerotate")) { $fim = imagerotate($fim, rand(-25, 25), $transparent2); } $iTranspa2 = imagecolortransparent($fim, $transparent2); imagecopymerge($im, $fim, 0+$i*$wFont, rand(4,26), 0, 0, $wFont+9, $hFont+9, 80); imagedestroy($fim); } } imagepng($im, KT_CAPTCHA_TEMP_FOLDER . $this->filename); imagedestroy($im);Changing the font
This line allows you to select which type of font to use:
$fontFileName = dirname(__FILE__).'/fonts/MyriadWebPro.ttf';
To air on the side of caution, I will suggest you use a TrueType font. In order for this to work, simply copy your font of choice to the fonts folder located in "includes/common/lib/captcha/fonts/" and change the name of the font from MyriadWebPro.ttf to the font you have chosen. For example, if you decided to use the font called impact.ttf, the result is shown below:

Colors and Sizes
If you are looking to add more colors to your captchas, locate the following lines:
$color1 = rand(0, 64); $color2 = rand(0, 64); $color3 = rand(0, 64);
At the moment, you are limited to 64 random colors hence, the reason why you get the dark colors. Now if you change the number 64 to 255, this allows you to add brighter colors as well.

To change the size of letters in your captcha, locate this line:
$okttf = @imagettftext($im, 14, rand(-25, 25), 10+$i*$wFont, $hFont+rand(4, 26), $text_color, $fontFileName, $string[$i]);
Replace 14 with the size that you wish. Make sure that whaever size you choose fits within the captcha image.

If however you choose to have larger fonts, you have 2 options here, either make the CAPTCHA image bigger or limit the number of characters that are generated.

The above image shows a slightly bigger captcha.png file. Remeber that if you do decide to have different colored backgrounds, make sure that your fonts are visible as well. In the above example, the colors have been set to display only white. If you want capital letters instead of small letters in your captcha or you want to change the number of generated characters, have a look at this function from the KT_CaptchaImage.class.php file.
function getRandomText() { $letters = 'abcdefhjkmnpqrstuvwxyz2345678'; $str = ''; for($i=0;$i($letters);$i++) { $str .= str_repeat(substr($letters,$i,1),2); } $str = str_shuffle($str); $_SESSION[$this->name] = substr($str, 0, rand(5,8)); return $_SESSION[$this->name]; }To change from small letters to capitals, change this line:
$letters = 'abcdefhjkmnpqrstuvwxyz2345678';
To:
$letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ2345678';

The CAPTCHA is set to genereate between 5 to 8 characters. This is set from this line.
$_SESSION[$this->name] = substr($str, 0, rand(5,8));
If you want change this to only generate 5 characters, simple chnage the line above to this:
$_SESSION[$this->name] = substr($str, 0, 5);
I could have gone into more details with each line of code, but I chose to pick out the ones that were necessary for you customize your CAPTCHAs the way you want them to be. I hope you have found this useful.
- Filed In: ADDT (Kollection) Tutorials & Tips
« Previous Article Next Article »
Related Articles
blog comments powered by Disqus





