Magento Facelift Image Replacement skripta

Facelift Image Replacement ili FLIR je skripta koji vam omogućava zamenu slike dinamički generišući je u skladu sa tekstom na vašoj web stranici koji je u fontu koji možda ne bi bio vidljiv vašim posetiocima. Evo kako to izgleda u Magentu.

1. Preuzmite FLIR sa FLIR homepage. Zbog jednostavnosti za ovaj članak je korišćena najnovija 1.2 verzija, ali ukoliko želite možete da probate kako izgleda i beta 2.0 koja takođe dobro obavlja posao, ali zahteva malo više konfigurisanja.
2. Otpakujte FLIR sadržaj (cache, fontove, … ) u okviru skin/frontend/default/default/facelift
   Možda je najbolje da sve stavite u skin folder.
3. Otvorite app/design/frontend/yourpackage/yourtheme/template/page/html/head.phtml i dodajte
   [php]
   <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>
   </li>
   </ol>
   [/php]

   Ukoliko php error nije isključen, dodajte error_reporting(0); negde pri vrhu config-flir.php. Ovo je glavni config fajl iz koga možete da definišete opcije i kastomizujete fontove, stoga se dobro upoznajte sa njim.Sada vaša Magento e-prodavnica treba da se refrešuje i videćete sledeće rezultate.

   flir.js takođe može da se doda u layout fajlovima u “head” bloku:

   [php]
   <reference name=”head”>
   <action method=”addItem”><type>skin_js</type><name>facelift/flir.js</name></action>
   </reference>
   [/php]

   Postoje i Vodič za brzi početak (Quick Start Guide) i Dokumentacija (Documentation) koji su dostupni na FLIR naslovnoj strani, tako da se sada nećemo baviti nekim naprednijim detaljima, ali evo nekoliko primera:

   [php]
   //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);  } );
   [/php]

   Tekst je preuzet sa veb sajta inchoo.net u okviru serijala tekstova za Magento Srbija i e-trgovina.