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’ }) );
FLIR.auto();
});
</script>

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>
</reference>

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
FLIR.auto(‘h5,h4’);
//pass an array of selectors
FLIR.auto( [ ‘h4’, ‘h5’ ] );
//replace manually with custom options
FLIR.replace( ‘div.box h4’ , new FLIRStyle({ mode: ‘wrap’ , css: {‘font-family’:’arial’} }) );
//prototype way
$$(‘div.box h4’).each( function(el) { FLIR.replace(el);  } );

Cya.

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

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

Your Magento shop deserves a custom tailored theme!

How to keep your CMS blocks organized (and not go insane) Adrian Bece
, | 10

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

Development and design under the same roof Kristina Orak
Kristina Orak, | 4

Development and design under the same roof

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