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 enjoyed this post! You may also like:

Oct 28, 2016

Your Magento shop deserves a custom tailored theme!

/ Leave a comment
Oct 06, 2016

How to keep your CMS blocks organized (and not go insane)

/ Leave a comment
Aug 11, 2016

Development and design under the same roof

/ Leave a comment

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