Grow your CSS skills. Land your dream job.

#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. Adrian
    Permalink to comment#

    Great video as usual really helpful!

  2. wow very awsome that technique

  3. 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. Hi there,

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

  5. 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…

    • 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..?

    • 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…

    • 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. 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. 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 :)

    • 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. Chrissy
    Permalink to comment#

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

    • 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.

    • 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. 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?

  10. 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/

    • clarklab
      Permalink to comment#

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

    • 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. Exactly what I needed for a couple of projects I’m working on now. Thanks Chris.

  12. Permalink to comment#

    Thanks, good summary…

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

  13. 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. Permalink to comment#

    The FLIR page renders perfectly in Opera.

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

  15. 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. 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. 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. 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. 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. Very nice tutorial, Chris! Good job, and thank you for the link <3!

  21. 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. Craig
    Permalink to comment#

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

  23. 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.

    • 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. 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. 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. Thanks for this tutorial!
    It was great and easy to implement.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".