jgiam.com

I designed a website for a friend, who wanted to use SimpleViewer for his portfolio. I wanted a dynamic gallery, rather than a static one requiring him to use, for example, Picasa to manage the gallery and then upload it. Thus I searched and came upon SimpleViewerAdmin.

He requested a hidden album feature such that the album can only be accessed directly through its URL.

Read the rest of this entry »

This is the first entry in the “Techie Corner” category.

While doing my church’s website, I was given a list of people’s names, mobile phone numbers and e-mail addresses to put up on a page. Using Unicode to obfuscate e-mail addresses has generally worked. But to use that in this situation would make the code messy and harder to maintain.

Several websites use images to display e-mail addresses. That is pretty much foolproof, unless those “harvesters” start using OCR technology, which is, I think, more unlikely than updating their software to recognise Unicode.

So the next step was to look for something that allows me to generate text to images on-the-fly. Unfortunately (and maybe I was searching using the wrong terms), I failed to find anything.

So I then proceeded to write my own script.

First off, you need a webserver with PHP and ImageMagick.

To test if you can access ImageMagick, use the following code:

<?php system("convert -version 2>&1"); ?>

You should see an ImageMagick version number. If you get something else, or some error, then you cannot use the following code.

The main code is as follows. Save it anywhere, but remember the path.

<?php
function text2img($text) {

$imgdir = "/path/to/imagedir/";
$fontdir = "/path/to/fonts/";

$texthash = md5($text);

if (!file_exists($imgdir.$texthash.".png")) {
$imagemagickcmd = "convert -fill '#333' -font ".
$fontdir."trebuc.ttf -pointsize 13 label:'".
$text."' ".$imgdir.$texthash.".png 2>&1";
system($imagemagickcmd);
}

echo '<img src="/images/text2img/'.$texthash.'.png" />';
}
?>

This is very simple, rudimentary code. It assumes your site will only need to generate images with a standard colour, font size and font type. Which would likely be the case for most websites. If you need to generate images with different properties, you can always include additional parameters.

$imgdir = "/path/to/imagedir/";

Set this to the path where you want to save the generated images. Preferably in a directory of its own. (e.g., if your website’s images are in “/my/webpath/images/”, you may want to create a new directory within “images” called, say, “text2img”.

$fontdir = "/path/to/fonts/";

If you know the path to the server’s fonts directory, then set it here. However, that’s not necessary (and in fact, if you are on shared hosting, you probably won’t be able to access it). You can create a directory (outside your web directory would be better), e.g. “/my/fonts/”. Then, upload a TTF font to that directory, but remember the file name (if necessary, rename the filename to keep it short). If you want a fancy font in Windows, go to “Control Panel”, “Fonts”. Select the font you want, and “Copy”, then “Paste” to a normal Windows folder. Then upload that file.

$imagemagickcmd = "convert -fill '#333' -font ".
$fontdir."trebuc.ttf -pointsize 13 label:".
$text." ".$imgdir.$texthash.".png 2>&1";

The “#333″ sets the colour. It accepts any value in standard RGB hexadecimal format (e.g. #3cf, #33ccff).
“trebuc.ttf” is specifying the font. Change this to whatever font you uploaded.
“-pointsize 13″ sets the font size. Change this as desired.

echo '<img src="/images/text2img/'.$texthash.'.png" />';

Change the “src” path to the absolute web path to your images directory. For example, if your images are in “/my/webpath/images/text2img/”, and your web root is “/my/webpath/”, then for the “src” tag, you would use “/images/text2img/”. If you want to ensure HTML compliance, you may wish to add “alt” parameter, but obviously don’t put the “$text” variable since the whole point is to hide the text.

To use the code, in the file that you want the e-mail address or any text generated, insert the following line anywhere, as long as it is before where you want to generate the text.

<?php include "/path/to/text2img.php"; ?>

At the position where you want to generate the text, just put the following instead of the normal text:

<?php text2img("test@e.mail"); ?>

I hope this was useful, and I welcome any comments.