Huddled Masses

I’ve created another WordPress plugin… to make images in my headlines.

“Why” you ask? Well, because I saw an article on ALA which reminded me of something I did for my church’s website a couple of years ago to make images out of headlines (not that we’re using it there anymore, but anyway) ...

The ALA article had a neat feature for caching, which I thought would make the whole process worth doing, so, I created a WordPress plugin based on their code … and plugged it into my headlines, and “poof” there you are (note: this requires both the GD library and the FreeType library).

However, there’s a couple of tricks to get it running:

There are several variables you have to set at the top of this plugin before you can use it:

• The $before variable is a special string which will allow you to make sure your titles are only replaced when you want them to be. For instance, if you set $before = "[image]", then, in your index.php template, your call to the_title should be: the_title("[image]"); when you want the title to be replaced with the image. Doing this takes advantage of a built-in parameter of the_title which will be prepended to the actual title. Of course, this plugin will strip that text off again, so the net-result is: the title is replaced with an image of the title in the font of your choice!
• The $font_file variable must be set to the local path (not the URL) of a True Type (TTF) or Open Type (OTF) font on your web server. This is the font that your images will be created with; youa??ll need to upload it to the web server from your own computer. By default, it’s set to a font I’ve got on my server, you’ll have to upload a font to your server and set the path to where you uploaded it.
• $font_size, unsurprisingly, refers to the size of the font in points.
• The $left_padding setting pads the left of the text by the specified number of pixels. Particularly useful when combined with the $background_image setting.
• $text_color and $background_color are hexadecimal color codes that indicate the color of the text, and color of the imagea??s background, respectively.
• The $background_image is an optional setting which (if set) must point at a .png image which will be placed in the background of the header …
• When $transparent is set to true, the edges of the imagea??s text will be blended with the $background_color to prevent anti-aliasing, and the actual background color will be entirely invisible.

• $cache_folder to the local path of a writable directory on your web server, the plugin will save each image that it creates for later use, significantly speeding up delivery of images to your visitors.

So, I got a little bored … and I added shadows, just because my original script (from the church website I mentioned earlier) had them…

• [new] The $shadow_count setting controls the whole thing. If it’s set to 0, everything is as before. If it’s set to 1 you get a single shadow level, and 2 gets you two levels of shadow.
• [new] $shadow_offset controls how many pixels offset the shadow(s) appear. Honestly, unless you’re using a huge font, you probably only want it offset by one pixel, or at most two.

• [new] There are two color settings for each of the possible shadows. If you only have one level, then $shadow_color_1 is your man, but if you have two, $shadow_color_2 is the second level and appears offset from the first shadow by the same ammount as that shadow is offset from the actual text.

If you want a really subtle shadow you’ll want to offset the shadows by one pixel, and have your second shadow be lighter than the first. To get a more pronounced shadow, you can set your second shadow to a slightly darker color, which results in a more ‘drop shadow’ like effect. Anyway. For the time being, you can see this effect in action on my site, of course.

I hope this is clear enough. Most of it is ripped from the article on ALA, so if you want details on what the PHP code is doing, you can read that, or the php image documentation

[Edit]: I’ve added two new twists to this plugin:

• The new background_image setting (documented above) allows you to have a background image, either a full background, or just a small icon-like image. Having added this, I found I wanted my text moved a few pixels to the right, so I put in a setting to pad the left side of the text: left_padding
• The other new thing is some sample code that lets you call the text-to-image function (called “imagine”) multiple times with different settings. As a sample, I’m running it to make images of my category list (across the top) as well as my headlines. Once again, I hope the sample code is clear enough. If you don’t understand what’s going on:
  • Comment out the last line to avoid replacing your category text

• Look for (and edit) the settings below the line function imageheadlines($text) { on lines 250-261

47 Responses to “Automatic images for headlines”