facelift v1.2 » Quick Start Guide
Using FLIR is a snap. Follow these three simple steps and be up and running in minutes. No complex code to understand. No external tools or plugins to use.
1. Download Facelift.
The first step is probably the most difficult. Download facelift image replacement and extract it to your web folder — preferably into its own directory.
Requirements: PHP and GD (with FreeType enabled, and PNG support). PHP5 is recommended but PHP4 should work. A newer version of ImageMagick is required for the FancyFonts and QuickEffects plugins -- something around 6.3+.
2. Customize the config file.
Open config-flir.php and customize to your liking. All the variables and options are explained in-depth in Facelift's documentation. If you don't customize this file, Facelift will still work, but will replace using the default fonts provided.
3. Add to your website.
Just add at least these lines of code to each web page where you want FLIR to run. By default FLIR is set to only replace headers (H1-H5).
Place the following code just before the closing </body> tag on every page that you want to have it do its thing. Above your analytics code is fine, just make sure it is after everything you want to replace and before the closing body tag.
<script language="javascript" src="/path-to/facelift/flir.js"></script>
<script type="text/javascript">
FLIR.init( { path: '/path-to/facelift/' } );
FLIR.auto();
// Or, you can pass an array of selectors to the auto function to be replaced.
FLIR.auto( [ 'h1', 'h2', 'h3.special', 'strong#important' ] );
</script>
You can also place the include into the <head> of your page to speed things up a tad — just make sure to put it after any styles.
<script language="javascript" src="/path/to/flir.js"></script>
Go further.
If you don't want to use the auto function, you can get more control of what gets replaced by taking advantage of the FLIR.replace() function and FLIRStyle object.
Think of a FLIRStyle as a collection of Facelift options that you can attach to an HTML object. A FLIRStyle is not required to use the replace function. You could simply call FLIR.replace('h2');
FLIR.init(); // All H2s that are children of div#entries will be replaced with the // "illuminating" font that is defined in config-flir.php. The "wrap" // mode is also set which is good to use when replacing long headers. FLIR.replace( 'div#entries h2' , new FLIRStyle({ cFont:'illuminating' , mode:'wrap' }) ); // All H3 elements will be replaced with the tribal font. FLIR.replace( 'h3' , new FLIRStyle({ cFont:'tribal' }) );
More detailed examples can be found in the Facelift examples section.
Using Facelift with jQuery
<h2>hello world</h2>
<script language="javascript" src="/path/to/flir.js"></script>
<script type="text/javascript">
FLIR.init();
$("h2").each( function() { FLIR.replace(this); } );
</script>
Using Facelift with prototype/scriptaculous/mootools
<h2>hello world</h2>
<script language="javascript" src="/path/to/flir.js"></script>
<script type="text/javascript">
FLIR.init();
$$("h2").each( function(el) { FLIR.replace(el); } );
</script>
