As I was laying the foundations for my JavaScript Cat I found myself in a little quandary, (excuse the oximoron as quandaries are not usually little) and a quandary is not a very nice place to be. I realised that I was creating this cat for the amusement of myself and others but without a way of getting the word out there, no one will know when I’ve added further developments to my scripted feline.

I decided to play around with something I haven’t used as often as I would like and use PHP, the GD Module and XML/RSS to create a dynamic billboard that I could deploy quickly and easily. Of course it would have to be a one-time only deployment because I am notoriously lazy; the rest should be done for me.

If you would prefer to see the script in action, scroll down a little or go here and have a play around

Promoting Myself With PHP, XML and The GD Module

What I have created is a PHP class that generates an image where the text in the image comes directly from the RSS feed from my WordPress blog. All I have to do is use a simple HTML image and set the src attribute to a PHP script (with optional configurations set in the URL). The class itself turned out to be quite large but more importantly, quite flexible. In fact, it is possible to deploy this within a couple of minutes on any server with PHP 5. For this reason, I decided to package it up and give it to anyone who may wish to use it to promote their own blog.

Promote Yourself With the ImageFactory Package

You may be asking what use an image with dynamic text is. Well, for all it seems like a simple idea, images are generally one of the few things you can link to from one site to another without too many restrictions. You probably frequent quite a few forums, have a MySpace page, have a FaceBook account and will likely join more of these types of services in the future. A vast majority of these sites allow you to display images that are linked in from other places (forum signatures, MySpace Profile Page etc.) and having an image that continually updates based on your blog’s new content means that you always have an up-to-date link to your site that you needn’t change.

You will rarely find a site allowing you to link to a PHP script and it would be tedious to update your forum signature or profile page everytime you had some new content on your blog so having a dynamic image placed inside a link is an attractive time-saving method.

Here is an example of what this package does. This image will always display details of my latest blog entry:

Once you have this package on your server, it’s a simple matter of wrapping the image in a link that points to either your blog front page or a script that directs the user to your latest blog entry.

Using the ImageFactory Package

As the class itself got quite large as I was writing it, I decided to run PhpDocumentor over the file so that documentation was generated based on the comments in the file. You can take a look at the class detailing here.

Once you have downloaded the files, you have a couple of options for deploying it:

1. The Easy Way

   After extracting the files you should have a directory called image-factory. Inside there will be a file called image_factory.php where you need to change the value of $site_feed to be the URL or your blog’s RSS feed. Place this folder on your server and simply point the src of images at /path/to/image-factory/.

   Once you have done the above, you should see a simple image containing the title of your last post, it will be quite boring but by adding configurations to the the query string, you can begin to change things around. An example URL may look like:

   
http://www.lukedingle.com/image-factory/?width=600&height=200&font=4&background=666666&fontcolor=ff0000


   The above URL will generate an image that is 600 pixels wide, 200 pixes high, uses GD system font 4, has a background colour that is dark gray and a font colour that is bright red.

   A full list of the properites can be found at the bottom of this post. You can take a look at the PhpDocumentor documentation to see what each does.

   Assuming that your server has PHP 5 and the GD module available, the only problem you may encounter is WordPress’s implementation of a Front Controller Patter. (Where all requests are routed into one script so WordPress can process the URL and decide what to output) If this is the case for you, you need to make an alteration to your .htaccess file and allow requests to the image-factory directory to bypass WordPress.

   Add the following to the top of your .htaccess file:

   ^?View Code SHELL

   RewriteEngine on RewriteRule ^path/from/wordpress/directory/to/image-factory(.*) path/from/wordpress/directory/to/image-factory$1 [L]

2. The More Robust Way

   In the easy way, all of the configurations are sent via the query string. This is fine but the URL’s can be a bit unwieldy and some websites do not allow query strings on images added to their content. This second way allows you to have a URL that looks like an image but still contains all of the configurations.

   Extract the files and change the $site_feed property in image_factory.php to the RSS feed for your site. Rename index.php to index.php.old and index.php.2 to index.php. Finally, rename .htacess.2 to .htaccess and point the src of your img tags to /path/to/image-factory/any-name-you-want.jpg

   You may need to add the WordPress bypass to your main .htaccess file as above but you should be ready to go now.

   By changing the files as above, you are routing all requests coming to the image-factory directory that end with .jpg, to the (now) index.php. Inside of index.php, a static method of image_factory.php is invoked that processes $_SERVER['REQUEST_URI'] to obtain all the configurations before outputting the image. To configure the same image as I set up in the easy method above, you can now use:

   http://www.lukedingle.com/image-factory/width-600/height-200/background-666666/font-4/fontcolor-ff0000/luke.jpg

   So now, as well as getting a dynamic image, you get a URL that looks like one. This will please the more pedantic sites as the URL says what the content will be – an image.

   The only caveat to this method is that if any of the values you send contain a forward slash or hyphen you will need to replace them with “qp789qp789″ for forward slashes and “56ty65″ for hyphens. These are strings I have chosen that won’t occur in the configurations very often. You can change the default values in image_factory.php — the method is generate_from_request

Because All Coders Are Lazy

Now, writing these URL’s to configure your image is quite a task in itself. You will see, in the image-generator directory, a file called url-generator.php. If you point your browser at this file, you will be greeted with a jQuery powered form that, once filled out, will give you a preview of your image and the URL you need to use. All of the configurable options, minus the $site_feed, are here for you to play around with. If you leave the directory structure exactly as it is when you extract it, the file will generate a list of all the font files in the font directories as well as images in the static directory. To add more fonts or background images, simply place them in these directories. You can then use them immediately.

Some Things To Note

• If you are using a background image, you will find some odd results using .png images with alpha transparency. I plan to add this feature eventually but for now you will want to convert .png’s to jpeg first or use png’s with no transparency.
• You can place as many fonts as you like in the fonts folder but these aren’t normal fonts, they are binary fonts (a very simple font type). For this reason, you can’t change the font size (but you can use the $resample_width and $resample_height features to change the rendered font size) and you can’t use .ttf files that you might find on your Windows computer. The font types have an extension of .gdf and if you can’t find any I have included quite a few in the package. Also, you may wish to take a look at Font Converter (for windows), this is a very handy tool for converting your windows fonts into .gdf fonts.

The Configurable Options

The list shows the names of the properties you can modify. It will also hint at allowed values if it’s not self explanatory.

• width
• height
• font – relative path from the php script to a .gdf font file. To use the fonts included in the package you could use fonts/fontname.gdf
• fontcolor – hexidecimal colour. eg. FFFFFF for white
• content_x – horizontal position of the content pulled from the RSS feed
• content_y – vertical position of the content pulled from the RSS feed
• background – either a hexidecimal colour or a relative path to an image on the server. To use one of the images included in the package you could use static/imagename.jpg
• content_before – arbitrary string of content to place before the dynamic content
• content_before_font
• content_before_fontcolor
• content_before_x
• content_before_y
• content_after – an arbitrary string of content to place after the dynamic content
• content_after_font
• content_after_fontcolor
• content_after_x
• content_after_y
• site_feed – the RSS feed that the content will come from. This option is only configurable if you remove it from the $excluded array.

Tags: GD module, PHP, RSS, XML

This entry was posted on Thursday, November 6th, 2008 at 11:42 pm and is filed under PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.