FaceLift Image Replacement (FLIR)
What is it?
This is a method of image-replacement that generates all the images for you on the fly. You don't need to design all your images beforehand.
How it works
Start by downloading the free package from the facelift page. Add the following to the bottom of your page (just before the </body> tag). Make sure the src="" tag and path: values match the path to your flir folder.
<script type="text/javascript" src="facelift/flir.js"></script>
<script type="text/javascript">
FLIR.init( { path: 'facelift/' } );
// Specify what selectors you want to have font-replaced.
FLIR.auto( ['h3','h4', 'p#sideDemo', 'h1', 'h2', 'h4#super', 'h4#issues' ] );
</script>
Taken from the bottom of this document.The CSS stylesheet for your page will store "font-names" which act as references for the flir scripts. Basically, the script combs through the page looking for tags based on what tags you tell it are eligible to be converted to images. These reference names are converted to requests for specific fonts based on how you have configured the config-flir.php file.
The following CSS styles have been added to the document:
h1 { font: 2em jazz; }
h2 { font: 1em optima; }
h4 { font: 2em wanta; }
p#sideDemo { font: .8em euphemia; color: #FF0;}
h4#super { font: 1em optima; }
h4#issues { font: 2em optima; }
Taken from the head of this document.Notice that each of the styles included here were also included in the FLIR.auto( [...] ) declaration above. The CSS font selections refer to the file config-flir.php which contains an array you construct to hold references to fonts (which must be uploaded to the server by you).
// Each font you want to use should have an entry in the fonts array. $fonts = array(); $fonts['illuminating'] = 'ArtOfIlluminating.ttf'; // a default font $fonts['okolaks'] = 'okolaksBold.ttf'; // a default font $fonts['wanta'] = 'wanta_091.ttf'; // a default font $fonts['chalkboard'] = 'chalkboard.ttf'; // uploaded by user $fonts['euphemia'] = 'euphemiacasbold.ttf'; // uploaded by user $fonts['jazz'] = 'jazzText.otf'; // uploaded by user $fonts['optima'] = 'optima.dfont'; // uploaded by userTaken from config-flir.php
I still don't get it!
I don't blame you! Basically, it takes the text you have entered in the tag and makes an image out of it using a command like this:
<img class="flir-image" alt="What is it?" src="facelift/generate.php?text=What%20is%20it%3F&h=31&w=763&fstyle=%7B%22mode %22%3A%22%22%2C%22output%22%3A%22auto%22%2C%22cSize%22%3A%2217%22%2C%22cColor %22%3A%22rgb%280%2C%200%2C%200%29%22%2C%22cFont%22%3A%22lucida%20grande%22%2C %22realFontHeight%22%3A%22false%22%2C%22dpi%22%3A%2296%22%2C%22cBackground%22 %3A%22transparent%22%2C%22cSpacing%22%3A%22%22%2C%22cLine%22%3A%221.2353%22 %2C%22cAlign%22%3A%22start%22%2C%22cTransform%22%3A%22none%22%7D" style="border: medium none ;"/>Taken from Firebug's rendered HTML for this document.
Rather than placing background images, this is an image used in place of the text that was initially there. However, since the code executes after the page loads, search engine crawlers read the original tag resulting in no penalties in the realm of Search Engine Optimization. For screen readers, the original text is automatically integrated into alt attribute of the image.
A quick comparison of the page source vs. the rendered HTML in Firebug will demonstrate the differences
More!
If you glance at the right of the screen, you'll see two bits of text. The Yellow one is rendered by FLIR using the "wrap" mode which constrains the image to the width of it's containing element. Without "wrap" mode enabled, the text would simply go offscreen. This is an example of one of many configuration options available.
Some Issues...
Because the FLIR system is rather large and complicated, it can have unintended consequences. For instance, look at the dividing border over "Some Issues... " and see how the size of the container has changed as the font-size was increased, forcing the border lines out of position.
Also, there is significantly more overhead to get FLIR up and running on a site initially. If you're not comfortable looking at .php and .js and figuring out what things are, it is probably not the system for you. That said, once the system is learned it would make using image replacement effects concievable on a very large scale site because it is a largely automated process.