Magento FLIR

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. Let’s see how it behaves in Magento.

1. Download FLIR from FLIR homepage. I was using latest 1.2 stable for this article because of simplicity, but if you try you’ll find out that 2.0 beta also works great but requires little more configuration.

2. Unpack FLIR content (cache,fonts,etc.) inside skin/frontend/default/default/facelift
I think it makes perfect sense to put it into skin folder.

3. Open app/design/frontend/yourpackage/yourtheme/template/page/html/head.phtml and append

<script language=”javascript” src=”<?php echo $this->getSkinUrl(‘facelift/flir.js’) ?>”></script>

<script type=”text/javascript”>
document.observe(“dom:loaded”, function() {
FLIR.init({ path: ‘<?php echo $this->getSkinUrl(‘facelift/’) ?>’ }, new FLIRStyle({ mode: ‘wrap’ }) );;

If your php error reporting isn’t disabled add error_reporting(0); somewhere on top of config-flir.php. This is main config file from which you can define options and custom fonts, so examine it.

Refresh your Magento store and you should see the result.

flir.js can also be alternatively included from layout files inside head block
<reference name=”head”>
<action method=”addItem”><type>skin_js</type><name>facelift/flir.js</name></action>

There is nice Quick Start Guide and Documentation available from FLIR homepage, so i won’t go in details on some advanced FLIR settings, but here are few examples:

//pass selectors as comma separated list‘h5,h4’);
//pass an array of selectors [ ‘h4’, ‘h5’ ] );
//replace manually with custom options
FLIR.replace( ‘ h4’ , new FLIRStyle({ mode: ‘wrap’ , css: {‘font-family’:’arial’} }) );
//prototype way
$$(‘ h4’).each( function(el) { FLIR.replace(el);  } );


You made it all the way down here so you must have enjoyed this post! You may also like:

Reinventing the running game for a German retailer shop4runners Maja Kardum
, | 0

Reinventing the running game for a German retailer shop4runners

(Why) should your designer be Magento certified? Aron Stanic
, | 0

(Why) should your designer be Magento certified?

Your Magento shop deserves a custom tailored theme! Ivona Namjesnik
Ivona Namjesnik, | 3

Your Magento shop deserves a custom tailored theme!

1 comment

  1. It is quite amazing that after years of different apporaches and techniques, there is still no broadly accepted standard for image replacement. But then again, we will most likely never get to see a broad usage of IPv6, so it seems kind of natural again..

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.