Auto Generated Text Images

Posted on | October 5, 2008 | No Comments

I find it cumbersome to create label image and upload it manually when updating categories or page titles from CMSes. In most cases, text label images are used instead of plain text mainly due to aesthetic considerations. Some advantages of using text label images:

text looks better with anti-alias
fancy fonts can be used for the menus or content

If the CMS can auto generate the label image, I no longer have to manually create images when updating the content

There are different approaches to achieve this. You can do it in Flash with a variable to pass in the text. You can do it with an image manipulation library and scripts. For this post, I will explain how to get it to work with Cakephp and GDLib.

I have a bunch of categories that are used as the main navigation for a website. The menu text is in a fancy font and of fixed width.

What do we have?

Model : Category
Controller : CategoriesController

Setup

Check that the server you are deploying to supports GDLib
Copy the font you are using into /app/fonts/
Create folder to save the images /app/webroot/images/dynimg/tags

TextImageComponent

I used TextImageHelper from Cake Bakery but with some changes of mine. I believe I had to correct some bugs in the original file. I converted the Helper into a Component. This is because helpers are meant to be called in the views to aids in the rendering. But I need to create the label images when saving data. What I needed is a Component.

Changed:

class TextImageHelper extends Helper

to:

class TextImageComponent extends Object

and saved the file in /controllers/component folder instead.

Including TextImageComponent

Add to CategoriesController:

var $components = array('TextImage');

I have 2 functions, admin_add and admin_edit. These are where the save() for Category called. Note that I don’t have the calls to TextImageComponent here. They are in Category::save();

Instead, I have

$this->Category->TextImage = $this->TextImage;

to pass TextImage to Category.

This is where the real action comes in

class Category extends AppModel {</code>

var $name = 'Category';
var $useTable = 'categories';
var $TextImage = null;
/*var $validate = array(
'name' => array(array('required' => true, 'message' => 'Please enter a name for the category.' )),
);*/

//The Associations below have been created with all possible keys, those that are not needed can be removed
var $hasAndBelongsToMany = array(
'Feature' => array('className' => 'Feature',
'joinTable' => 'features_categories',
'foreignKey' => 'category_id',
'associationForeignKey' => 'feature_id',
'unique' => true,
'conditions' => '',
'fields' => '',
'order' => '',
'limit' => '',
'offset' => '',
'finderQuery' => '',
'deleteQuery' => '',
'insertQuery' => ''
)
);
var $belongsTo = array (
'ParentCategory' =>
array('className' => 'Category',
'foreignKey' => 'parent',
'order' => '',
'dependent' =>  false,
'conditions' => '',
'finderQuery' => '',
),
);

function save($data) {
$data['Category']['filename'] = $this->createLinkImage('tags', 'CENSCBK.TTF', 0, 14, '333333', array(2, 2, 2, 2), $data['Category']['name'], 100);
return parent::save($data);
}

function createLinkImage($dir, $font, $softenFactor, $ps, $color, $margins, $text, $maxWidth) {
$this->TextImage->setImageDirectory("dynimg/$dir");
$this->TextImage->fontFile = $font;
$this->TextImage->softenFactor = $softenFactor;
$this->TextImage->setPointSize($ps);
$this->TextImage->setColor($color);
$this->TextImage->setPadding($margins[0], $margins[1],$margins[2],$margins[3]);

return $this->TextImage->image($text, $maxWidth);
}

}
?>

The setup for image size, font, font size and color, padding is done in createLinkImage function.

End Result

Every time the category is saved, whether in the admin_edit or admin_add, an image will be created. This is the first draft to test out the concept. I need to cater for different style for the parent categories.