Magento FLIR

Featured Image

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.


About Ivan Weiler

Technical Educator and Consultant

Ivan is a Technical Educator and Consultant. He gained lots of experience managing some of the most complex Magento projects we had at Inchoo.

Read more posts by Ivan / Visit Ivan's profile

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