Facelift Image Replacement (FLIR) for WordPress

Facelift Image Replacement (FLIR) is a WordPress plugin that generates image representations of text on your web page in fonts that visitors would not be able to see.

Download from 23Systems

Facelift Image Replacement 0.8.7 (467) - 495.01 KB

Download from WordPress.Org

Facelift Image Replacement for WordPress

Description

FLIR for WordPress implements Facelift Image Replacement (FLIR) by Cory Mawhorter.  It is in rapid development and almost completely configurable from the admin panel.  Several freeware fonts are provided with FLIR for WordPress.

FLIR for WordPress is SEO friendly and only renders the image in the browser if JavaScript is enabled.  You HTML/XHTML code remains unchanged leaving your head tags readable by search engines and the page readable by those without JavaScript.

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> elements and everything in between!

You can see examples of what it does here: http://facelift.mawhorter.net/examples/

IMPORTANT: If using a version prior to 0.7.0 please delete your existing version before installing this version

Before running autoupdate please empty your facelift/cache folder.

Installation

Requirements

PHP and GD. Little testing has been done with different versions of PHP. If you have PHP 5 with GD enabled you shouldn’t have any problems. PHP 4 currently has some issues but should be resolved in the next release of Facelift. A newer version of ImageMagick (6.3.7+) is required for the FancyFonts and QuickEffects plugins.

If GD is not installed on your server you will have to recompile PHP to include GD. If you are comfortable in WHM for cPanel, you can do that under the “Update Apache” tab (check the “GD” box). Check your settings carefully (especially the PHP version - cPanel may try to change it) before you hit build. Plesk and ISPConfig should have GD enabled by default.  If you are not comfortable doing it yourself, ask your hosting company to do it for you. (Thanks Steve!)

Delete your existing version before installing this version

  1. Extract to your wp-content/plugins directory.
  2. Look in wp-content/plugins/facelift-image-replacement/facelift
  3. Set the wp-content/plugins/facelift-image-replacement/facelift/config-flir.php to be writable (chmod a+w config-flir.php).
  4. Set the wp-content/plugins/facelift-image-replacement/facelift/cache to be writable (chmod a+w /cache)
  5. Add fonts of your choice to wp-content/plugins/facelift-image-replacement/facelift/fonts folder
  6. Activate plugin in WordPress admin panel
  7. Set FLIR configuration in the admin panel - config-flir.php must be writable for changes to take effect.
  8. Customize tags for FLIR on FLIR submenu under the Design menu

Notes

  • QuickEffect Plugin is not implemented yet
  • If using a version older than 0.7 completely delete any old verions before upgrading as this plugin is under rapid development
  • You cannot auto-upgrade from versions older 0.7.0
  • Text remains intact in source so search engines see your page as text!

Screenshots

After FLIR

After FLIR

Before FLIR

Before FLIR

Frequently Asked Questions

It doesn’t work

There are number of reason the plugin might not work.  Check the following:

  • Please ensure that you have a cache directory at wp-content/plugins/facelift-image-replacement/facelift/cache and that it is writable. (chmod a+w /cache)
  • Please ensure that your config-flir.php file exists at wp-content/plugins/facelift-image-replacement/facelift/config-flir.php and that it is writable. (chmod a+w config-flir.php)
  • Make sure the wp-content/plugins/facelift-image-replacement/facelift/ is readable
  • Check your theme’s footer.php file and make sure it has the wp_footer(); function in it.  It should be located just above the </body> element close tag.
  • Check your theme’s header.php file and make sure it has the wp_head(); function in it.  It should be located just above the </head> element close tag.
  • Check the FLIR admin panel under the design menu and make certain all the options are set in the FLIR Configuration section.  Read the help text on the right of each option for information.
  • Check the FLIR admin panel under the design menu and make certain all the options you want are set in the Elements to Replace section.  Heading 1 is generally used for the blog heading, Heading 2 is used for the posts on the main page and on individual post pages, Heading 3 is often used with posts on the catagories and tags pages.  Small is often used for the date and author of the post.

Will FLIR be configurable from the admin panel?

FLIR is almost completly configurable from the admin panel.  Eventually it is planned to be able to configure FLIR almost completely from the admin panel.  At present to configure how and what fonts are used with flir and certain element to be replaced by FLIR.

Will the FLIR plugins be usable?

At present the FancyFonts plugin is implemented.  QuickEffects will be implemented next.  They require ImageMagick 6.3.7 or higher to function correctly and will be configurable from the admin panel.

What about the fonts that come with FLIR?

All the fonts that come with FLIR are either free or Open Source.

What advantages would you say FLIR provides over sIFR? Besides, of course, from needing flash?

  • Facelift creates transparent PNGs which can lie over the top of any background you want.   For example, take a look at Example #5.
  • It can easily create multi colored/font headers.  (Example #3)
  • It can replace links and maintain their clickability (though I believe this functionality was added to sIFR).
  • It is very easy to implement.  No other tools besides a web browser are needed and it is very easy to maintain.
  • It plays well with third party libraries such as jQuery and prototype.
  • You can take advantage of plugins such as the QuickEffects plugin and add things like drop shadows and pattern/gradient fills if you have ImageMagick installed on your server.

Is there some kind of caching system? If so, how does it work?

Facelift caches all images it generates to disk.  It then will send appropriate headers to the browser if the image has not changed.  This allows for drastic speed increases in rendering when browsing a website.  After a couple of page views you sometimes won’t even notice the text get replaced.  By default, the cached images are saved indefinitely, but you can change facelift to run through the cache every so often and remove old images to save disk space.  Just change the settings in the admin panel.

It still doesn’t work / I have other questions

The best places to get answers are here on this page or FLIR Integration with WordPress Forum.

Known Issues

  • Automatically updating the plugin does not always work - I have not tracked down the issue but I suspect it has to do with the cache folder.  Before running autoupdate please empty your facelift/cache folder.

Change Log

0.8.5

  • Set the tags used by the Automatic method to follow the element types as defined in the configuration
  • Add checkbox to allow the use of external JavaScript libraries - jQuery, Scriptaculous and Prototype support only
  • Hide Elements to Replace section when using Automatic method as Elements to Replace is not used in that case.
  • Add checkbox to disable FLIR for IE6 or lower users to avoid rendering issues that sometimes occur.
  • Fix the global Use FancyFonts not showing it’s activated.
  • Other minor interface fixes for WordPress 2.7
  • Changed internal selection methods to increase speed and reduce memory usage.

0.8.0

  • Updated Facelift to 1.2 release
    • Font Collections
    • Basic Callback Functions
    • Better error handling
    • Bug in generateURL causing HTML not to be sanitized
    • Added functionality/bug fixes for “wrap” mode.  Better line-height support.
    • Rewrote element replacement algorithm. You no longer need to encapsulate plain text in span elements to have it replaced.  The new algo is recursive so it can replace any number of child elements.  You could even run it on document.body if you wanted to!
    • Added flir-image and flir-span classnames to the elements flir creates
    • Javascript Plugin support!
    • Moved DetectImageState code from facelift.js into a Javascript plugin
    • querySelectorAll support for the browsers that support it (Safari, FF3.1 alpha)
    • Font size modifier for cSize in FLIRStyle. You can now specify a font size calculation to be applied against the CSS font size.  For example, if you want the generated image to have a font size that is 140% the one you specified in your CSS you could do   cSize:’*1.4′.  All font sizes will then be multipled by 1.4.
    • FLIRStyle.buildURL no longer requires an HTML object to be passed
    • Hover caching problems fixed.  Better hover style support.
    • JPG and GIF support! Set the “output” option in FLIRStyle.  The default output option is auto.  Auto will cause the generated image to be a transparent png if the element doesn’t have a background color set. Otherwise it will use GIF.
    • Hover now only works with <A> elements.
  • Rewrote code for better readability and adherence to code conventions (hopefully)
  • Redesigned admin interface to be more logically organized (again, hopefully)
    • Added more helpful information to the configuration text.
  • Added ability to specify all elements to replace rather than just the few I had.
    • For example you can specify something like h1,h2,div#sidebar a to have your h1, h2 headers and all of the sidebar links replaced.
  • Fixed deactivation routine to preserve config-flir.php during auto upgrade.
  • If manually upgrading please deactivate plugin before upgrading to ensure config-flir.php is configured correctly. 

0.7.7

  • Updated Facelift to 1.2b3-3

0.7.6

  • Updated Facelift to 1.2b3-2 

0.7.5

  • Added Facelift FancyFonts plugin option.  FancyFonts uses ImageMagick to render fonts instaed of GD and can be useful
  • Fixed the errant semi-colon issue that everybody keeps telling me about but I kept not seeing for some reason
  • Added (hopefully) better text prompts to the admin panel

0.7.0

  • Initialize plugin and set basic settings on install - note: the new version will overwrite your current config-flir.php
  • Set all config-flir.php settings (except allowed domain and font discovery which is done by the plugin)
  • Ability to flush cache on demand
  • Ability to reset the entire plugin and reinitialize
  • Ability to choose to have fonts automatically replaced for h1 to h5 headers or select a specific JavaScript library to use (jQuery, Prototype, Scriptaculous)
  • Latest version of Facelift 1.2b2 which fixes numerous rendering issues.
  • Admin panel page reloads after saving changes to reflect updates
  • Reduced number of fonts that come with plugin - all fonts are freeware/open source and redistributable
  • Easy addition of your own fonts - just drop in fonts folder and configure from admin panel
  • Selection of what fonts to include during element font selection
  • Moved additional admin includes into subdirectory
  • Minor cosmetic and coding fixes

0.5.9

0.5.5

  • Removed prototype implementation in favor of jQuery, noticeable improvement in speed.
  • Bug with IE in rendering header in some cases not jQuery related

0.5.0

  • Added per element modes

0.4.1

  • Updated Facelift to 1.2b

0.4.0

  • Basic admin functionality added
  • Implemented prototype in plugin for per element rendering

0.3.0

  • Initial Release
  • Auto redering of <h1> to <h5> only
  • Using Facelift 1.1

Upcoming Features

  • Quick Effects (require ImageMagick) ~v0.9
  • More…

Under consideration

  • Uploading of fonts from within the plugin

Development Version

  • Always the latest code
  • May be buggy - actually probably is
  • Please remove existing version before install development version

Support

For FLIR for WordPress and Facelife Image Replacement general support see the forums at FLIR Integration with WordPress

158 Responses to “Facelift Image Replacement (FLIR) for WordPress”

  1. Zach says:
    January 2, 2009 at 12:58 pm

    A few things regarding disabling IE 6 and “wrap” property:

    The submenu in the wordpress FLIR admin page called “Elements to Replace”, which contains the menu to choose “static”, “wrap” or “progressive”, disappears for some reason the first time you edit and save the FLIR configuration. If you happen to choose “static” or not even notice the menu the first time you configure the settings, you either have to change the Javascript method to something other than Automatic, which for some reason returns the submenu called “Elements to Replace”, or you can go into the “FLIR for Wordpress Utilities” submenu and choose to reinitialize FLIR which makes the submenu appear as well.

    That drove me crazy for a long time because I couldn’t find the menu to change the thing to wordwrap instead of static even though I vaguely recalled seeing it before.

    The “Disable for IE6″ checkbox disables FLIR for IE6 and 7.

    In the code it’s:

    if ($dropIE == 1) {
        $browser = get_browser();
        if ($browser->browser == "IE") {
          if ($browser->majorver >= 6) {
            return true;
          }

    If you change the “>” to an “=” it only disables FLIR for IE 6:

    if ($dropIE == 1) {
        $browser = get_browser();
        if ($browser->browser == "IE") {
          if ($browser->majorver == 6) {
            return true;
          }

    Hope this helps some people. This is a great plugin!

    Reply
    • Dan Zappone says:
      January 2, 2009 at 2:31 pm

      The “Elements to Replace” section should only appear if using a method other than Automatic. I should probably title it something else like “Elements to Replace when using JavaScript Libraries.” Actually I need to fix a few things in the interface and write some better documentation as FLIR for WP is becoming more complex each time I release it.

      Thanks for the info regarding IE 6 - it worked fine in my tests but I probably did an undo at the last second I think I meant <= so it would also disable for IE 5 (God forbid anyone is using that) as well. Others had reported the same problem and I’ll roll that into the code next release. I’ve had way less time to work on anything recently than I would like and so FLIR for WP has suffered from lack of recent updates. I should hopefully have that out soon - I may just quickly roll the IE6 fix into the code to get it out there. Thanks again.

      Reply
  3. tosca says:
    December 16, 2008 at 5:21 pm

    How can I modifiy the font size, as they are way too small? (I tried to modify the style.css, but to no avail).
    I don’t understand what the “Mode” parameterization is for? Where can I find some more information about these parameters?

    Reply
    • Dan Zappone says:
      December 16, 2008 at 6:03 pm

      Modifying the CSS should do the trick. You may have to clear the FLIR cache to see the effects.

      Modes are:

      Static. The image generated will not be constrained. The dimensions will be large enough to fit all text passed. This is the default mode.

      Progressive. The text size used for the generated image will be reduced until it will fit within the HTML elements bounds. The text size will not be increased if it doesn’t fill the elements bounds.

      Wrap. If the text is wider than the HTML elements bounds at the passed font size it will be wrapped at the appropriate spots. Wrap can also take advantage of center and right aligned text.

      You can get more information about how it works here:

      http://facelift.mawhorter.net/doc/

      Reply
  5. Ritesh Sapra says:
    December 16, 2008 at 4:13 am

    Hey Dan,

    Thanks for this great plugin. On the download page of the plugin, the minimum requirement you mentioned is Wordpress 2.5, though I couldnt get it running on my blog when I had 2.5.1

    I upgraded to 2.6.5 and now it works like a charm. I’m not sure if this is exactly the reason or there could be something else, but if you think this is the reason, you might want to add it to the Notes, so people upgrade Wordpress to use this plugin.

    You can have a look at it here - http://riteshsapra.net

    Cheers :-)

    Reply
  6. FaceLift Image Replacement (FLIR) Wordpress plugin | Ritesh Sapra Digitalized says:
    December 16, 2008 at 4:04 am

    [...] to Dan, the author of the plugin, the plugin should work on Wordpress 2.5 or higher, but it didnt work on [...]

    Reply
  13. Tzaddi says:
    December 6, 2008 at 7:18 pm

    Hi Dan

    Do you know how to disable FLIR (plugin version) for IE6 only? I’m using it here http://libretea.com/wp/

    … and there’s enough issues with it in IE6 that we just want to turn it off for now.

    Was reading some suggestions in the support forums but I must be missing something, can’t seem to disable it for IE 6.

    Thanks!
    Tzaddi

    Reply
  14. SimplyMother says:
    November 21, 2008 at 10:30 pm

    I thought I wrote a response already, but it’s not showing up. So if you get this twice, sorry!

    You’ve been immensely helpful, and this is an excellent plugin, thank you very much! Everything seems to be working now, I’m using FLIR for my navmenu items, post titles, sidebar titles, postinfo at the bottom of each post, and page titles.

    The only slight thing that I notice, and probably most visitors won’t, so I’m not terribly worried about it, is that some of the words are different heights. Look at my navmenu–see how BOOKS is just a teensy bit above the rest? Also check out the postmeta data–the lines with the tags and date are a bit wiggly. Is this something that imagemagik thing would fix? If so, and if it’s free and not too complicated to install, I might get it.

    Anyway, thank you so much. Oh, and I changed the fonts to px for now. Em’s still scare me a little–how they’re all intertwined. In the past, I’ve changed one thing, and suddenly, accidentally a whole bunch of other stuff was effected. I know that’s the point, I’m just not sure I trust myself enough yet to implement it in a theme that doesn’t have it at all yet.

    Reply
    • SimplyMother says:
      November 26, 2008 at 12:14 am

      Hi, I found another clue to what was causing the font-size problem. I think it was because in my CSs, I had the font-family named starting with Futura, which maybe it didn’t recognize? So somehow that made it render my font really small? And no matter what px size I specified for the font, it wouldn’t change. Anyway, when I change it to Georgia or Lucida, the font-size works correctly again.

      Still some funny things going on though, I think I need the image magick thing installed. My cursive font isn’t rendering quite right–some of the letters are broken apart where they shouldn’t be. Would this be fixed if I figured out how to install imagemagick? Also, some things are really bumpy, like, look at my metadata under the post title here: http://simplymother.com/tag/website/

      Would all this be fixed with imagemagick? If so, where does it need to be installed? Do I need to do anything else after installing it? The Fancy Fonts plugin already included in FLIR, correct? TIA!

      Reply
      • Dan Zappone says:
        December 8, 2008 at 10:22 am

        I think it’s caused by having FLIR replace multiple elements on the same line and for whatever reason it’s not lining things up appropriately. See for eample how you have FLIR set for the date, comments and postinfo. If you can get all of those wrapped into a single style I think it would resolve your issue.

        $(" p.date").each( function() { FLIR.replace(this, new FLIRStyle({mode:'static',cFont:'ftramd'}));});
$(" p.numcomments").each( function() { FLIR.replace(this, new FLIRStyle({mode:'static',cFont:'ftralt'}));});
$(" p.postinfo").each( function() { FLIR.replace(this, new FLIRStyle({mode:'static',cFont:'ftramd'}));});

        You might try using the Wrap option - I don’t know if that will help or not.

        Reply
        • SimplyMother says:
          December 11, 2008 at 11:59 pm

          Hmm, I changed all that, but . . . still bumpy. And it shouldn’t effect my cursive font (for the post title) at all, and even when I remove everything but that from FLIR, the cursive font is still not exactly right. Do you think it’s because I need the Fancy Fonts thing? If so, can you tell me more about how and where to install ImageMagick, and anything else I’d need to do to get it working on my site?

          Reply
          • Simply Mother says:
            December 20, 2008 at 12:47 am

            So I upgraded my server to PHP 5 and also installed ImageMagick and now my cursive font is displaying properly–but I can’t get it to wrap. I’ve tried all the different modes as well as adding a right margin to the h2’s in my css file, all to no avail. (The right margin does make the regular font that shows up for a second before the image is replaced move in, so I know it is working, just not for the image.) Any suggestions there?

            I never could get the bumpiness to go away on the FUTURA font (for the nav bar, sidebar h3’s and the post metadata. It was also causing a weird background issue on the nav bar, so I just stopped using it for those classes altogether. Now I’m only using it for the cursive font in post titles and I’d just really like to get them to wrap to the second line, but I can’t. Instead, I just had to make my title shorter and/or decrease the font size.

  15. SimplyMother says:
    November 21, 2008 at 7:49 pm

    Thank you, you’ve been incredibly helpful. All appears to be working now. I am using it for my navigation menu, post titles, sidebar titles, and the postinfo under each post. The only slight thing is that I notice (and probably regular visitors won’t) a slight deviation in some of the words. Take a look at BOOKS in my navmenu–it is a teensy bit higher than the rest. The other place it is noticeable is in the metadata–the tags and date kinda wiggle up and down. Is this something that would be fixed if I had that imagemagik thing? If so, and if it’s not too complicated to install, where can I get it?

    At any rate, this is a wonderful plugin, thank you so much!

    Reply
  16. Tzaddi says:
    November 21, 2008 at 2:59 pm

    Hi Dan

    Thanks for your work on this plugin. I wonder if you have a moment to suggest some help with issues - explained here http://forums.mawhorter.net/viewtopic.php?id=157

    I’m still getting all the weird issues mentioned there. Issues in both IE and FF. Sounds like Cory chalks it up to wordpress but you + others seem to have success with it so maybe you have some suggestions?

    I’m considering giving up FLIR altogether but really want it on this particular site :-(

    Thanks!

    Reply
    • Dan Zappone says:
      November 21, 2008 at 3:26 pm

      I’ll see what I can find. I took a quick look at the site you mentioned and the only problem I’ve seen so far is with the menu not having enough space around the fonts - probably fixable by adding a margin. I’ll do some more solid testing in the next day or so. I’m sure we can get it resolved.

      EDIT: Actually, I took a deeper look than I had planned - there is definitely something weird going on - I don’t know what yet. Possible some other JavaScript is interfering. I’m not seeing the generate requests for most of the text - are you using any sort of caching plugins?

      Reply
      • Tzaddi says:
        November 21, 2008 at 4:16 pm

        Thanks Dan. There’s none activated right now. There’s wp-cache and wp super cache in a de-activated state (my webhost installs by default when I set up WP).

        I don’t think any of the active plugins do caching or JS, not that I know them intimately. I have enabled:
        FLIR for WordPress
        GigPress (custom write panel + output for the on tour page)
        Improved Include Page (include a page within another)
        My Page Order (drag + drop page order in the admin)
        WordPress Automatic Upgrade

        Reply
  17. Introduction à FLIR | Sinklar.be says:
    November 21, 2008 at 11:32 am

    [...] avoir plus d’informations à ce sujet, je vous invite à consulter le site de l’auteur du plugin (il y a entre autres une FAQ) et cette page avec des [...]

    Reply
  18. SimplyMother says:
    November 21, 2008 at 2:16 am

    Hi, this will be a wonderful plugin for me, if someone can help me figure it out!

    It’s working, but it’s not. I’ve gone through your troubleshooting list and everything appears to be in order. It’s working in that it renders the images on my site, however, it will only use the default font for everything, and it doesn’t appear take into account font-size at all. I mean, I don’t know where it’s coming up with the font-size–it’s not even using the default font size that I set in the configuration panel–I tried changing that and it made no difference.

    Is this a problem with my theme? Something in the CSS file? Everything is fine without the plugin, but perhaps it is something about this theme that doesn’t jive with the plugin? If anyone has any idea where I might begin to look, I would really appreciate any hints you can give me.

    One other thing, is there a way to use this for classes instead of just headings? I don’t know if they are elements or not. For example, my date is wrapped in a p class=date tag, and in the css file it is just stated as .date. I tried multiple ways of entering this as an element in the plugin (.date, p class=date, date), but none worked. Is there a way? If not, I think I can just change it all to h4 or something, right? But anyway, I tried that and it did render the image, however, it was the default image rather than the one I specified, as stated in my main problem above.

    Help?

    Reply
    • Dan Zappone says:
      November 21, 2008 at 8:24 am

      Make sure it’s not set to automatic for the JavaScript method - select jQuery or one of the others. I believe there are some font size issue with different browsers. If you have ImageMagick installed you can try using the fancy fonts options. Once it’s not set to automatic you need to configure what to replace in the Elements to Replace section.

      Your theme shouldn’t be an issue. There could possible be an issue with the CSS file but that’s unlikely. I’ll take a look at see if I can figure out why the font sizes are off.

      Yes you can use it for classes instead of just headings - just add p.date to the Element Types in the configuration section and save then that option should appear in the Elements to Replace section.

      Reply
    • SimplyMother says:
      November 21, 2008 at 11:03 am

      GREAT! Thank you, it was set to automatic. Jquery works! I have no idea what any of that means, or even if I had javascript and php enabled. I’m pretty sure I don’t have imagemagik, since I’ve never heard of it.

      Still trying to figure out the sizes. I want to revamp all the sizes anyway because I don’t like that they’re in points but first I have to figure out how the em things work. If you have any other ideas on the sizes, let me know. I’ll keep working.

      Reply
      • Dan Zappone says:
        November 21, 2008 at 12:32 pm

        WordPress comes with jQuery, Prototype and Sciptaculous JavaScript libraries included and runs using PHP on the server. FLIR requires both PHP and JavaScript to work so if you see it render you have JavaScript enabled in your browser - as all modern browsers do.

        1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ‘em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses. So you can leave the font to default to the browser’s default font size - 1em and set all other fonts around that. I often set the body font to somewhere between 75% and 85% (depending on the font I am using) then adjust the rest of the fonts based on em. FLIR however probably works best using px to determine font sizes where you can specify the exact size in pixels. FLIR does not work so well with using pt to determine font size.

        Your site is looking good. Let me know when you are done so I can see how FLIR looks with the finished product.

        Reply
« Older Comments

Leave a Reply