Image replacement for entry titles

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:

[code lang="php"]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;

}[/code]

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.

33 Responses to “Image replacement for entry titles”

  1. 1

    ColdForged (971 comments) - November 11th, 2004

    And of course, my code handling isn’t quite up to it. Ah well, it’s getting ever so slightly closer each time.

  2. 2

    Joel "Jaykul" Bennett (1 comments) - November 11th, 2004

    Nice work, I think I will grab that :)

    Hey, I like your code on black background, very DOS ;-)

  3. 3

    ColdForged (971 comments) - November 11th, 2004

    Nice work, I think I _will_ grab that :)

    Excellent! Thanks for considering it.

    Hey, I like your code on black background, very DOS ;-)

    That’s hilarious, I never thought of it that way… I’ve set up every editor I’ve ever used — starting with GNU Emacs back in ’92, I think — with white on black text and wanted to emulate what I see every day in my CSS. The DOS connection never occurred to me :) .

  4. 4

    Mike (37 comments) - November 12th, 2004

    That’s a nice plugin. Not sure if I like it on your site though. Maybe it’s because I’m browsing from a Mac, but the titles now are huge compared to the rest of the text on your site unless I increase the text size significantly.

  5. 5

    ColdForged (971 comments) - November 12th, 2004

    Oy. If it’s not an IE or Firefox incompatability, it’s a Mac incompatability. Any way you can grab a screenshot for me?

  6. 6

    Cy (13 comments) - November 12th, 2004

    Hmm, I’m seeing it on N7.1 for Mac and it shows up well. Look at you, gettin’ all fancy. ;-)

  7. 7

    ColdForged (971 comments) - November 12th, 2004

    Try this… if it looks like this:

    That’s the way I intended. I wanted bigger titles to provide more separation and focus on individual posts. However, I’m all about opinions. Anyone else think they’re too big?

  8. 8

    Mike (37 comments) - November 12th, 2004

    It’s a little more pronounced on my system just because I have the font size reduced a little in my browsers, and because the title is an image it doesn’t reduce with the rest of the text. It’s not bad though (and in the default font size looks a little more normal). I’m just not a big fan of big titles.

    Don’t get me wrong, though… the plugin and your mods to it are still kickass.

  9. 9

    ColdForged (971 comments) - November 12th, 2004

    Point taken… I guess it would look enormous if you regularly shrink the fonts. Refresh and tell me what you think.

    Old size:

    New size:

    It’s hard to design for people that text zoom anyway, really. And that is definitely a drawback to the creation of fixed-size headlines. But, I like the look too much to worry overly and I’m all about the fashion over content :D .

  10. 10

    ColdForged (971 comments) - November 12th, 2004

    As an aside, yay, my code handling finally works! Sorry, had to interject.

  11. 11

    Photo Matt » Image Title Plugin - November 15th, 2004

    Plugin

        November 15th, 2004 6:23 am 
        File under:     Asides
    
    
    
    Coldforged has an entry title image replacement plugin that lets you have titl [...]
    
  12. 12

    juancuca (1 comments) - November 15th, 2004

    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 :D .

  13. 13

    lucky33 - Archives - November 16th, 2004

    titles"> check out my new post titles…i found a nice little WordPress plugin to replace post titles [...]

  14. 14

    sum1 (2 comments) - November 18th, 2004

    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.

  15. 15

    ColdForged (971 comments) - November 18th, 2004

    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:

    <span style="display:none"><?php the_title();?></span>

  16. 16

    indi (1 comments) - November 24th, 2004

    I wonder, is it possible to replace the_content with images?

  17. 17

    True confessions of Josh Owens, a cheesy techno-geek... - November 27th, 2004

    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…

  18. 18

    ColdForged (971 comments) - November 30th, 2004

    I wonder, is it possible to replace the_content with images?

    I don’t see why you couldn’t in theory. Simply do an add_filter() call to add the image replacement filter to the_content, then prepend the appropriate tag to the content in your template. Of course, for any sizeable content you’re talking about some serious images.

  19. 19

    Tek (4 comments) - January 4th, 2005

    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.

  20. 20

    Lee (5 comments) - January 12th, 2005

    I’m really quite enamored of the code quoting you used. Could you tell us how you made it?

    Rock on.

  21. 21

    ColdForged (971 comments) - January 14th, 2005

    I’m really quite enamored of the code quoting you used.

    Thanks, Lee. It requires some work, but it is essentially stuff from this plugin and the Beautifier files mentioned therein, but tweaked almost to death. Really, I couldn’t tell you what all I’ve changed to get it to work even as well as it does, but it requires some diddling. Kind of frustrating, really.

    Note also that I’m on a fixed-column format here which doesn’t help. In order to have “pretty” code I have to be careful of line lengths. Sometimes that’s a pain :) .

    Good luck, hope this helps.

  22. 22

    coldforged.org » Soft-shadowed headline images - February 8th, 2005

    [...] may swoon, it is allowed. I’ve had the images up there for quite a while, in fact I tweaked an existing plugin in order to get it to work to my lik [...]

  23. 23

    torgeir (1 comments) - February 13th, 2005

    i rally love this plugin!

    you can use http://www.danvine.com/icapture/ to see what your site looks like in safari & then theres http://browsercam.com for all the rest… (but it’s a pay site…)

    :torgeir

  24. 24

    Zonekiller (2 comments) - March 7th, 2005

    Hi, great plugin! I’ll add it to my blog ‘to do’ list. :)

    Anyway I’d like to know how to make my gravatars look like yours… they’re very great! Could you please help me?

  25. 25

    ColdForged (971 comments) - March 7th, 2005

    Don’t know how I missed it but thanks for the browser tips, torgeir!

    Anyway I’d like to know how to make my gravatars look like yours… they’re very great!

    Thanks! Probably the easiest way is looking at the code for the comments section as well as the CSS file. From there you should be able to get it :) .

  26. 26

    Zonekiller (2 comments) - March 11th, 2005

    Thanks!

  27. 27

    Belinda (2 comments) - March 14th, 2005

    Hi there–Can you take a look at my blog? http://www.belindasplace.org I am using your image replacement plug in and I really like it–but do you see how some of the titles get cut off at the bottom? Any help would be GREATLY appreciated!

  28. 28

    ColdForged (971 comments) - March 14th, 2005

    Nice site, Belinda. That’s a known problem for which I’m currently trying to come up with a solution.

  29. 29

    Belinda (2 comments) - March 15th, 2005

    AH….Okay doeky…thanks!

  30. 30

    苟世录 - April 8th, 2005

    自动生成图片标题的WP插件

    无意中发现的,http://www.coldforged.org/image-headlines-plugin-for-wordpress-15/ 考虑流量不够大,装了可能会消耗很多流量就放弃了。

    PS:好像插件需要支持gd。…

  31. 31

    geckobrothers - April 11th, 2005

    A couple changes

    If you are a regular reader of the carnage, you have no doubt noticed some changes to the site. The new titles for entries are images that the server creates, which is good, because I wouldn’t want to make a new image for every entry title. The plugin…

  32. 32

    jason (3 comments) - December 22nd, 2005

    this plugin is absolutely FABULOUS. i have one recommendation…. be more specific when referencing a font…. ie e:\www\wp-content\image-headlines\microgbe.ttf

  33. 33

    DiegoPino (1 comments) - October 3rd, 2006

    sorry, but my english its no so good.

    Hola.

    Soy nuevo en WordPress y estoy aprendiendo. he instalado el plugin de la forma correcta, he leido todo los manueles en ingles y la orientacion que aca se presta, pero sigue sin funcionar en mi web. Nota: Esta confirmado que my server esta bien configurado, y soporta libreria GD para fuentes true type. me sale algo asi: -image-Entrada test ver ejemplo test on Line:

    http://www.we11.net/diegopino/wordpress/

    Test de que esta funcionando la libreria GD para fuentes tryçue Type: http://www.we11.net/diegopino/wordpress/wp-content/image-headlines/truetype.php

    Espero que me puedan ayudar, porque ya me estoy cansando de tanto leer y no funcionar. el Chmod esta correcto. por su atencion prestada, muchas gracias de antemano.

    Atte DiegoPino

    :-)

Leave a Reply

Comments links could be nofollow free.