#54: Introduction to FLIR

FLIR (Face Lift Image Replacement) bills itself as an "alternative to sIFR". They are definitely in the same category. sIFR has some extra functionality, but is relies on more technology on both the server and client side. FLIR may be a little easier to use and requires less technology, but has less functionality. In this screencast I walk through integrating FLIR on a WordPress site I was working on.

Links from Video:

Comments

  1. User Avatar
    Adrian
    Permalink to comment#

    Great video as usual really helpful!

  2. User Avatar
    Web Design Puerto Rico
    Permalink to comment#

    wow very awsome that technique

  3. User Avatar
    Aaron Bazinet
    Permalink to comment#

    I’m liking this approach more than sIFR. Not having to touch Flash is nice. I guess your problems using sIFR on that site turned out to be a good experience!

  4. User Avatar
    John Tsevdos
    Permalink to comment#

    Hi there,

    What type of images generates? Do they support transparency?
    Nice tutorial by the way…

  5. User Avatar
    clarklab
    Permalink to comment#

    Here at work I used FLIR in a project very heavily once only to have our security team come two days before launch and veto it. Apparently its not secure at all, the image paths generated have the full script parameters displayed, and there is nothing stopping someone from just blasting your script, over and over creating tons of server processing and filling your cache…

    Was really nice to work with but such a bummer to have to remove…

    • User Avatar
      One Day Websites
      Permalink to comment#

      Thanks for that heads-up ClarkLab. It is a real shame, because the security issue aside, FLIR looks like a very worthy option.

      Does anyone else have some expert security opinion on the matter..?

    • User Avatar
      clarklab
      Permalink to comment#

      Yea I wish I had some more specifics but security isn’t really my thing. I just know word came back from our security department as ‘absolutely not.’ And I work for a huge MMO company so we have quite the expert security team…

    • User Avatar
      pufaxx
      Permalink to comment#

      That’s a point for me, I agree …

      I’ve tried to find a solution: Readout a password-file via Ajax and make the “generate.php” ignore requests without this password. Unfortunately I’m a beginner with JavaScript so I did not notice, that my first idea only worked with my “control-alerts”.

      :-(

      The second idea is to introduce a “timestamp”, so that the “generate.php” does not work without a correct time (plusminus a few seconds) in the $_GET-parameter.

      What do you think about >>that?

  6. User Avatar
    Mike
    Permalink to comment#

    Interesting stuff. Must say I still prefer sIFR, there’s a lot to be said for scale-ability and selectability, plus you don’t get that ugly effect on reload.

    According to Adobe the flash player is installed on 99% of desktops worldwide, so I reckon that anybody web savvy enough to disable flash will probably have javascript turned off as well.

    So all it really comes down to is file size and personal preferences.

  7. User Avatar
    Gavin Steele
    Permalink to comment#

    Looks really nice, not sure about the security stuff.. but is the lack of being able to select the text out way the size of the files created with sIFR?

    You mention that its all fine for SEO. Does it create the ALT text for the image? How does that work?

    Great tutorial :)

    • User Avatar
      Mike
      Permalink to comment#

      Let’s not get carried away with file size. The last site I used sIFR on the swf came in at 16kb which, to put it in perspective, is less than a third of the size of the footer image (56kb) that Chris is using on this site.

      Neither method needs to use alt text as they are both converting whatever is written in the html which is what the search engines read.

  8. User Avatar
    Chrissy
    Permalink to comment#

    too bad it only works with PHP (which is not immediately obvious on this page or the FLIR site

    • User Avatar
      Mike
      Permalink to comment#

      PHP is not the problem, end users can’t disable that. It’s the use of javascript and, in the case of sIFR, flash where you are relying on your site visitor to have them enabled.

    • User Avatar
      clarklab
      Permalink to comment#

      I think she means that not everyone’s server is running php, not that the end user won’t be…

  9. User Avatar
    Karl
    Permalink to comment#

    @Chris (or anyone):
    Do you think it would be feasible to use FLIR to create expandable menus? I have just such a project I’m working on today and the client want to use a non-standard front for the menus.

    I assume it would have to render each menu item. That could get expensive as people tend to hover the cursor over each main menu item to see what is revealed. Is there a way to have FLIR cache the images?

    • User Avatar
      Mike
      Permalink to comment#

      According to this thread on the flir forums it works with suckerfish so the short answer is yes.

  10. User Avatar
    Kevin Thompson
    Permalink to comment#

    I recently tried out Cufon for the first time which is extremely lightweight as well. It uses canvas (or VML where canvas isnt supported) to render fonts. So far its seems to be the easiest font replacement solution to implement and style, but the drawback I see is that there is no highlight on text selection (although the documentation states that it selects, just doesn’t highlight).

    http://cufon.shoqolate.com/generate/

    • User Avatar
      clarklab
      Permalink to comment#

      Wow, Cufon looks really great. I’m definitely going to poke around with that when I get a chance…

    • User Avatar
      pab
      Permalink to comment#

      can’t seem to be able to upload my fonts to cufon, any tips on how to go about, sent them a message aswell

      thanks

  11. User Avatar
    Bill Robbins
    Permalink to comment#

    Exactly what I needed for a couple of projects I’m working on now. Thanks Chris.

  12. User Avatar
    Andrew Vit
    Permalink to comment#

    Thanks, good summary…

    Also like FLIR, that font is pronounced “A-ve-NEER”, not “A-ve-nur”…

  13. User Avatar
    David Rivers
    Permalink to comment#

    Hey, I noticed the JS script tag was confined in an “If not IE 6” conditional. I assume it’s therefor not compatible with that version of MSIE? Unfortunate if not, since that’s a large part of the market (nearly a quarter?). Otherwise, really cool stuff. Nice to be able to do stuff without requiring Flash on the client-side.

    Any idea which PHP graphics lib. is being used on the back-end? GD or Magick? Something else?!

    Only really wish the text were selectable (and not images)!!

  14. User Avatar
    Shane
    Permalink to comment#

    The FLIR page renders perfectly in Opera.

    Oh wait – it doesn’t. I have Flash and JavaScript enabled.

  15. User Avatar
    Patrick DeVivo
    Permalink to comment#

    Awesome screen-cast Chris,

    Strangely, when I went to test FLIR using a font I downloaded (Sketch Rockwell) it was able to retain its “selectability” on the page.

    Even better.

  16. User Avatar
    Schoon
    Permalink to comment#

    I know I asked this on Twitter, but I’m really curious – what’s the benefit of using this versus typeface.js?

    I’ve been using it for a little while, and really like it. It’s also based on javascript, but uses the canvas tag instead of images.

  17. User Avatar
    dave
    Permalink to comment#

    I used FLIR for a project last week after strugglign to get SIFR working. More detailed fonts sometimes render a bit weird but other than that its pretty good

  18. User Avatar
    Sean
    Permalink to comment#

    downloading this to my pmp right now to watch later on the subway. do you have a link to all screencasts for bulk download?

    Suggestion for future screencasts, include title in file name.

  19. User Avatar
    Mike Dedmon
    Permalink to comment#

    Awesome as always – I was wondering if it would be possible to make the embedded videos zoom in the browser. I discovered a trick with the videos at theme-forest.net.

    I wanted full screen, but I hate how it drops out if you press a key or click the mouse. After some experimenting, I discovered that the embedded flash videos will zoom with the browser (at least in firefox). So, I just zoom the video to fill the screen on one monitor while I follow along on my second monitor. Full screen all the time. Awesome. It would be great if this worked on your site as well.

    I’m a HUGE fan and greatly appreciate you sharing your knowledge with the rest of us. I always look forward to your next video. BTW – They’re never too long or long-winded. So much great info. I’ve learned a ton.

  20. User Avatar
    Stefan Vervoort
    Permalink to comment#

    Very nice tutorial, Chris! Good job, and thank you for the link <3!

  21. User Avatar
    Greg
    Permalink to comment#

    There is a FLIR plugin for WordPress that works really well. My biggest problem is that without imageMagick on the server, the rendering of the font can be a little off/chunky (depends on the font, some work better than others). I think I’m leaning back towards sIFR these days.

    And, I don’t care what they say, I prefer Flur over Fleer (reminds me of the old Gif/Jif wars).

  22. User Avatar
    Craig
    Permalink to comment#

    Thanks, can’t wait to try it out on my next project!

  23. User Avatar
    Sven
    Permalink to comment#

    Your tutorials are great. I just wish you would stop using “RIGHT?” as a period to your sentences. It’s grating.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I’ve been watching myself for that and it is epidemic. It’s like slang or something and I’m not sure where it came from. I heard Merlin Mann doing it in a presentation the other day now that I’m watching for it, so I must have subliminally picked it up from others.

  24. User Avatar
    Evan
    Permalink to comment#

    One problem I ran in to with sIFR and doing more elaborate things with javascript is that you can’t apply opacity transitions to elements that contain sIFR text. It will work in some browsers but on others everything but the flash will change opacity but the flash is always at 100%.

    Try having sIFR text on a page and then layer something over top of it like a modal window. Even if using wmode transparent you are going to run in to some z-index issues on a few browsers. Basically the flash will show through anything you place above it. There are ways to fix it but it is a time waster.

    I have more sIFR issues but I don’t want to bore you all.

    I have been eying FLIR because I know it will solve lot’s of these very annoying issues I have had with sIFR and flash.

  25. User Avatar
    ebowers
    Permalink to comment#

    Not sure if this was mentioned above, but I had a difficult time with FontForge so I found this http://onlinefontconverter.com/

  26. User Avatar
    Ted Graf
    Permalink to comment#

    Thanks for this tutorial!
    It was great and easy to implement.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag