melbourne chapter

Often we come across a situation where the Designer has decided to use a unique non-web font in a beautifully rendered title. Often forgetting the fact that the content in that font is dynamic and content managed.

So placed in this situation we can handle it a couple of ways. Complain to the designer about their lack of recognition of this, or deal with it by generating the image with the dynamic content.

The purpose of this article is to discuss the way we go about implementing a simple challenge like this.

For our solution to work well, we would need to be able to produce something that:
- Generates a replica image using the font used by the designer
- Follow good programming techniques and make it reusable
- Make it very flexible
- Cache the generated file and serve when required

For this solution we could use PHP and make ourselves a Smarty function that can be used again in the future.

We first need to make ourselves a PHP function. I prefer to do these typically as functions of a class that can be called statically using GraphicUtils::createImage(), but as we will be creating a smarty function we don’t want the dependency on other classes.

First code our function createImage() accepting two parameters, the first is a text string, and the second is an array of parameters. We will be passing all of the configuration options into this function as an array that will allow us to centralize the configuration options and a quick flexible way of accepting a growing list of configuration options (as we extend).

The kind of configuration options that would be good to support is
- Font (size, weight, colour etc)
- Background (image, transparent, offset, colour etc)
- Text Offset and Canvas Size
- Text Transformation (Uppercase, lowercase etc)

For our caching to work correctly we also need:
- Cache Directory (available to the apache web server)

We will need to be able to identify when the configuration options have changed for a given text. A way that we can do this is to save the configuration parameters into the filename. To do this we can use a resultant of a MD5 call on the serialized configuration parameters with the given text.

$filename = md5($text . serialize($parameters)) . ‘.png’;

Once we change the configuration parameters or text, we will result with a new filename. If we pass in the same configuration parameters and text in we will have the same resultant filename. This will be a suitable way for us to setup caching.

NOTE: To do correct caching we would want to be able to determine an expiry timestamp. Probably most suitable would be to store the file in the database with a relevant timestamp. We can then perform garbage collection removing all files with a timestamp. For this we will accept a simple caching scheme with no need for garbage collection.

When the function is invoked we will immediately generate our filename and check the cache to see if we have performed the task before. If not, we must generate our file based on the given text and configuration parameters and save it to our filename.

Our createImage function can generate the images from image magick or GD. For this sort of task I have found better support for GD on hosting services and heaps of documentation.

Our method should return the filename string, and we will use this to link to the file resource.

To integrate into Smarty we could produce a smarty plug-in function called “function.create_image_png.php”. We will use this plug-in to invoke our method, generating our filename to link to from our source.

An invocation could be therefore as easy as:

< img xsrc=”{create_image_png text=”Hello World” params=$imageConfig.header}” alt=”Hello World” />

Once the framework is implemented successfully you can easily extend it to your other image needs, such as creating a thumbnail or basic image manipulation. Your caching mechanism will have to be updated to incorporate a timestamp on your source file or similar.

Considerations: For this to be implemented correctly we need to be able to separate the View from the controller (As the controller shouldn’t be concerned with the presentation). Open for discussion.