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
$beforevariable 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 tothe_titleshould be:the_title("[image]");when you want the title to be replaced with the image. Doing this takes advantage of a built-in parameter ofthe_titlewhich 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_filevariable 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_paddingsetting pads the left of the text by the specified number of pixels. Particularly useful when combined with the $background_image setting. $text_colorand$background_colorare hexadecimal color codes that indicate the color of the text, and color of the imagea??s background, respectively.- The
$background_imageis an optional setting which (if set) must point at a .png image which will be placed in the background of the header … - When
$transparentis set to true, the edges of the imagea??s text will be blended with the$background_colorto prevent anti-aliasing, and the actual background color will be entirely invisible.
$cache_folderto 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…
-
The
$shadow_countsetting 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. -
$shadow_offsetcontrols 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.
-
$shadow_color_1is your man, but if you have two,$shadow_color_2is 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
[...] [...]
[...] [...]
[...] [...]
[...] [...]
[...] [...]
[...] [...]
WordPress Plugin: Automatic images for headlines
Huddled Masses latest plugin generates PNG images of text, written in the font/size that you specify. These PNG images are passed back to the browser. Optionally, they can be cached for later use. If a cached image is found, a new image will not be gen…
Many thanks – cool plugin.
I only mentioned earlier in the WP forums that the ALA article would be a good plugin, and NMoose pointed me here.
Nice work, thank you.
Is there any way to have this running twice, or to configure it so that I can replace the text for my dates as well, but in a smaller or different font?
Aurora: I’ve been thinking about that … it’s not hard to make it run on multiple sections, the trick is running with different settings. I figured out how to do it, but i think you’ll have to edit the plugin for each place you want to call it. Anyway, gimme a couple of days, I’ll release a new one
Woohoo! Great news, Joel. Thanks! I don’t mind editing the plugin… it only makes sense, if only to change the name a little so I know what plugin is running for which option.
I’ll check back when I get back from vacation.
I just noticed: do you notice that all your comments say they were posted on June 6?
wonderful idea… thank you for the effort.
sadly i am unable to get it working.
attempting to seek support in the WP support site:
http://wordpress.org/support/index.php?action=vthread&forum=10&topic=8009&page=-1#8
any help there would be most welcome!
dss
Aurora: tada! I am now using the Header Image Generator plugin to generate the category images at the top of my site (it probably won’t stay that way for long, I’m not sure I really like the look). The sample code in there for how to do the category images should be enough to let you plug it in wherever you want. If you wanted to, you could even mix this with the acronym replacer plugin and start putting images in random places in your text ;-p
Just got back from vacation… gave it a try… it works beautifully! I changed the category stuff to date instead. It was very easy to do. Thank you!!!
I have more of a question than a comment…is the replacement.js file still used or does the php plugin replace the need for the javascript file…
I apologize in adavance if it was in plain site but I was too blind to see.
Catherine, there is no replacement.js file involved. The plugin is self-contained.
Thanks Aurora!
Just updated the site with this very excellent little plugin, it’s a funky idea, in that I get to put any font I want as the main title bar and everyone can see it, which is nice. Information on this plugin can be found right here at Joel Bennet’s si…
I’ve got an idea for your script that brings in a few improvements. If you’re opposed to inline styles, however, this is not for you.
If you replace the Line that creates the return value with the following code, you essentially incorporate FIR into it as well, instead of just plain-vanilla image replacement.
$retVal = "<h2 class="replaced" style="height:{$height}px;background: url($cache_url) no-repeat top left;">$text</h2>" ;
You’ll also want to add a class to the stylesheet of your choice like this:
h2.replaced {<br />text-indent:-1234em; /*hide text*/<br />margin: 0;<br />padding: 0;<br />}
It seems to work pretty well for me.
I have a correction/improvement. I now realize that my first attempt broke validation, even though Firefox rendered it correctly.
This version is also much more useful for WordPress users who are using the provided stylesheet, or a variation of it
Stylesheet Content:
h3.storytitle {<br /> margin: 0;<br /> padding: 0;<br />}<br />h3.storytitle span {<br /> display: block;<br /> margin: 0;<br /> padding: 0;<br /> text-indent: -1234em;<br />}
PHP changes on line 70 of Joel’s Plugin:
         $retVal = "<span class="replaced" style="height:{$height}px; background: url($cache_url) no-repeat top left;">$text</span>" ;
Let me know if this works for you, if you try it.
I love your plug-in, it works fine for me. I am having a hard time getting it to validate, though. The page validates fine when the plug-in is deactivated. When activated, however, I get a string of “warnings”:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bhsboosters.org%2Fwordpress%2Findex.php
Well, that’s bizzare. My site validates fine [
]
Actually, you’ve got it configured wrong, you’re putting the whole image tag in the title attribute of the link.
I noticed that, but I’m not sure what I configured incorrectly. I must be missing something. All I changed was the font path and the font size, then I Activated the plugin. Was there other configuration that I was supposed to do?
Fixed it. I wasn’t using the $before option, so the text was being replaced by the image tag in the title attribute also.
Thanks!
One feature that would be very cool is a max-line-length setting so it will wrap long titles on to two lines. Thanks.
Is FreeType required for this to work?
This requires both the GD library and the FreeType library.
I am trying to get this plug-in to work with the post date and I am unable to get it working, i changed the cache image folder and all the other necessary variables. and when i load up the site, i get a undefined error while creating image type of msg… what do i need to change the_date() function to. to get this to work???
Thank you for your help and making such a cool plug-in !!!
THANKSSS
General — by danithew at 12:52 pm Thanks to Dan Hersam for pointing me to this plugin. I’ll be examining it more closely and perhaps even im [...]
I’m interested in using this plugin and have installed it. Do I set the configuration inside “image-headlines.php”?
Basically, yes. If you look at the comments in there (at the bottom) I hope it will be clear what you need to edit…
Thanks! Plugin was very easy to just drop in. I appreciate your work on this.
Actually, I’ve updated your delightful plugin to support text that needs to be broken into multiple lines. My site format is not as wide as yours, so longer titles caused me some overlap. You can find an example of a multi-line title here to see what it looks like in action. The code is available zipped up here. Please feel free to work this back in to the codebase if you so desire.
people who have done it—Matt is one—but never jumped on the bandwagon. Now I find a rather easy-to-use WordPress plugin and figured “why not? [...]
I’m unsure whether my comment got lost or is in moderation, but the trackback link above explains my modification to the plugin to support breaking long lines into multiple lines. You’re welcome to roll the changes into your code base if you desire. Thanks again for a great plugin.
oldforged has an entry title image replacement plugin that lets you have titles like mine (done previously) that also has word-wrapping. I think I saw an approach s [...]
; Comments: RSS2.0 Nov.15.2004 Added a nice plugin from Huddled Masses. It’s a mod from some existing PHP [...]
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…
I just started using WordPress…
Once the php is configured, where should I put it?
In the plugins folder, or I have to paste it into the index.php code? If so: where? I want to use the plugin for the posts headlines (h3 in the standard CSS and index.php)
Thank you in advance!
Ok, I put the php in the plugin directory and activated it from the admin panel. Now, instead of the post title I get this message: Warning: mkdir(): SAFE MODE Restriction in effect. The script whose uid is
Where are you having it store the cached images? Does that folder exist and have write permission for everyone?
Well, lots of questions:
w version of the Image Headline Plugin is available. This plugin was originally written by Joel Bennett but it’s come a long way since the beginning. New feat [...]
I’ve finally gotten around to adding a “download” link to my source script. All of my plugins should be simple and easy to download now, just click through to the source and hit the download link.
Hopefully that will solve all the download problems people have had.
[...] Hu[b]dd[/b]led Masses – Automatic Images for Headlines [...]
Hi… sorry for my bad english but i’m italian… there is a way to show the tex on multiple columns?? I tried it in my kubrick themes butm for long post titles, the text appears out of the content box…
There is not a way to do that with this plugin …. honestly, it could be added without too much trouble, but it’s a significant performance hit, so I opted for keeping them short instead. The fact is, I never liked multi-line headlines anyway, so I just didn’t take them into account. Of course, I’m not using it right now, so I’m not terribly motivated to fix it