Ecommerce developers with Magento

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.

There are 1 comments (Add Yours +)