NOTE: Hello recent visitors! Please note that the current title images that you see here are the result of completely revamped version of the plugin that supports soft shadows among other things. Please visit this page for more information.
As you have probably noticed, I decided to waste even more of the precious Internet bandwidth on vanity by moving to auto-generated images for entry title text. I’ve always liked the look of those people who have done it — Matt is one — but never jumped on the bandwagon.
Now I find a rather easy-to-use WordPress plugin by Joel Bennett and figured “why not?” It really was just drop-in simple. However, my site is relatively narrow in design, and some of my longer titles didn’t fit. There was no word-wrap support for longer titles.
So I added it! I tell you, there’s a lot of power there with PHP. I found some examples that people had made for word-wrapping based on the bounding box of a rendered text, but none of them were “nice enough” for me. So I did it my way, with support for indenting subsequent lines and specifying the vertical space between lines.
How was this done?
Let’s see if my code handling is up for this. Here’s how I split the single text title into an array of lines that fit within the stated width:
function break_text_into_lines( $text )
{
global $font_file,$font_size,$left_padding;
global $max_width, $space_between_lines, $line_indent;
// the returned array of strings to be on separate lines.
$text_array = array();
// Figure out how big a space is. Yes, I'm being anal.
$bbox = imagettfbbox($font_size,0, $font_file, ' ');
$space_width = max($bbox[2],$bbox[4]) - min($bbox[0],
$bbox[6]);
// Split the array into word components.
$words = explode( ' ', $text );
$current_line = '';
$current_width = $left_padding;
foreach( $words as $word )
{
$bbox = imagettfbbox($font_size, 0, $font_file, $word );
$word_width = max($bbox[2],$bbox[4]) - min($bbox[0],
$bbox[6]);
// See if the current word will fit on the line.
if( $word_width + $current_width + $space_width >
$max_width )
{
// It won't. Check the border case where we have a
// friggin' huge first word. If so, it'll have to
// be rendered on the line regardless.
if( $current_line != '' )
{
$text_array[] = $current_line;
$current_width = $word_width + $left_padding +
$line_indent;
$current_line = $word;
}
else
{
$text_array[] = $word;
$current_width = $left_padding + $line_indent;
$current_line = '';
}
continue;
}
// Word fits, so append it.
if( $current_line != '' )
{
$current_line .= ' ';
}
$current_line .= $word;
$current_width += $word_width + $space_width;
}
if( $current_line != '' )
{
$text_array[] = $current_line;
}
return $text_array;
}I’m really happy with the results. The full plugin is available here. I told the author of the original plugin that he’s welcome to roll the changes into his plugin, so it may show up there in the future. For those who want my version, feel free to grab it.
Lee Says:January 12th, 2005 at 7:30 pm
I’m really quite enamored of the code quoting you used. Could you tell us how you made it?
Rock on.
Tek Says:January 4th, 2005 at 11:28 pm
Can you please help me to get this to work. I think I must be misunderstanding an instruction because its looking really wrong. I keep seeing [image]then my title here.
thank you.
ColdForged Says:November 30th, 2004 at 11:11 am
I don’t see why you couldn’t in theory. Simply do an addfilter() call to add the image replacement filter to thecontent, then prepend the appropriate tag to the content in your template. Of course, for any sizeable content you’re talking about some serious images.
True confessions of Josh Owens, a cheesy techno-geek... Says:November 27th, 2004 at 12:42 pm
Image Replacement
I found this great image replacement plugin when I was surfing around for an iTunes plugin. I installed it on Kelley’s blog and she loves it so far. I may install it at some point, we shall see… Here is the original plugin minus the word wrapping…
indi Says:November 24th, 2004 at 1:33 pm
I wonder, is it possible to replace the_content with images?
ColdForged Says:November 18th, 2004 at 12:44 pm
Interesting point. However, that should easily be remedied by a non-displayed span of text. Thanks for bringing it to my attention! Hopefully the code will survive insertion in here:
sum1 Says:November 18th, 2004 at 12:37 pm
nice!
but there no way for google to read this title. not in the alt-tag and not through the image name even.
that’s a major drawback and a high price for just looking great.
lucky33 - Archives Says:November 16th, 2004 at 3:30 pm
titles"> check out my new post titles…i found a nice little WordPress plugin to replace post titles […]
juancuca Says:November 15th, 2004 at 2:58 pm
I tried to this a while a go when I was a PHP newbie and didnt have the patience to figure it out and finish it. Now, that Im a little more experienced, I will have that code snippet in my personal library to use it now and then
.
Photo Matt » Image Title Plugin Says:November 15th, 2004 at 10:23 am
Plugin