Share
Vorige week liet Philo je zien hoe je sIFR3 implementeerde. Deze keer laat ik je zien hoe je Facelift Image Replacement (of FLIR) kunt implementeren, een alternatief voor sIFR dat vereist geen Flash.
Merk op dat de demo verschillende lettertypen gebruikt dan de lettertypen die in de tutorial worden gebruikt om redenen van kopiëren.
De eerste stap is om FLIR te downloaden. Pak de download uit en plaats de map binnen (facelift-1.1.1) ergens op uw webserver. Ik heb de map hernoemd naar gewoon "facelift" om dingen eenvoudiger te maken.
In de facelift-map bevindt zich een Javascript-bestand met de naam "flir.js". U kunt ervoor kiezen om het daar te laten staan, of u kunt het elders verplaatsen, zoals een gecentraliseerde map voor Javascript-bestanden. Voor deze zelfstudie doen we precies dat en verplaatsen we het naar een map met de naam "js" in de hoofdmap van onze site.
Open nu flir.js in je favoriete teksteditor en ga naar regel 30. Het ziet er ongeveer zo uit:
,pad:"
We moeten een absoluut of relatief pad naar onze facelift-directory plaatsen tussen de twee enkele aanhalingstekens. Relatieve paden zijn echter relatief ten opzichte van de pagina en niet van het bestand flir.js. Dit kan problemen veroorzaken met sites die mod_rewrite gebruiken om mooie URL's te maken. De meest onfeilbare manier om alles te laten werken, is door een absoluut pad te bieden.
,pad: '/ pad / naar / facelift /'
Open de pagina waaraan u FLIR wilt toevoegen en voeg het volgende toe tussen de head-tags om flir.js aan te bevestigen:
Voeg vervolgens het volgende toe vlak voor de afsluitende body-tag:
Deze stap is vrij eenvoudig. Download de lettertypen die u wilt gebruiken. Ik gebruik Delicious, Tallys en Tusj. Plaats uw lettertypen in de map "fonts" in de map "facelift". Open config-flir.php en je zult een codeblok vinden dat er ongeveer zo uitziet:
// Elk lettertype dat u wilt gebruiken, moet een vermelding in de array met lettertypen hebben. $ fonts = array (); $ fonts ['tribalbenji'] = 'Tribal_Font.ttf'; $ fonts ['antagea'] = 'Antagea.ttf'; $ fonts ['illuminating'] = 'ArtOfIlluminating.ttf'; $ fonts ['bentham'] = 'Bentham.otf'; $ fonts ['geo'] = 'Geo_Oblique.otf'; $ fonts ['puritan'] = 'Puritan_Regular.otf'; $ fonts ['konstytucyja'] = 'Konstytucyja_1.ttf'; $ fonts ['promocyja'] = 'Promocyja.ttf'; $ fonts ['stunfilla'] = 'OPN_StunFillaWenkay.ttf'; $ fonts ['animaldings'] = 'Animal_Silhouette.ttf'; // Het lettertype staat standaard op het volgende (plaats hier uw meest voorkomende lettertype). $ fonts ['default'] = $ fonts ['puritan'];
Zoals u waarschijnlijk aan de opmerkingen kunt zien, is elk item in de array $ fonts een lettertype in de map met lettertypen. De arraysleutel tussen de haakjes is wat we gebruiken in onze CSS-verklaringen wanneer we het lettertype willen gebruiken. Laten we de lettertypen toevoegen die we eerder hebben gedownload.
$ fonts ['ffftusj'] = 'FFF Tusj.ttf'; $ fonts ['deliciousheavy'] = 'Delicious-Heavy.otf'; $ fonts ['tallys'] = 'Tallys_15.otf';
Wat is toegewezen aan $ fonts ['standaard'] zal worden gebruikt als een lettertype niet is opgegeven. Laten we Delicious Heavy als standaard instellen.
$ fonts ['default'] = $ fonts ['deliciousheavy'];
Er zijn een aantal andere instellingen in het config-flir.php-bestand, maar deze kunnen alleen worden gelaten. Wat elke instelling doet, is redelijk zelfverklarend en er zijn opmerkingen als je ze wilt aanpassen.
Standaard gebruikt FLIR beeldvervangingen voor alleen koppen. U kunt opgeven wat moet worden vervangen door een reeks CSS-selectors door te geven aan de functie FLIR.auto () die we in stap 1 hebben toegevoegd.
FLIR.auto (['h1', 'h2', 'h3.alert', 'strong # belangrijk']);
Dit zal FLIR vertellen om de vervanging van afbeeldingen toe te passen op h1-tags, h2-tags, h3-tags met een klasse van "alert" en sterke tags met een id van "belangrijk".
Nu hoeven we alleen maar CSS-stijlen toe te passen zoals normaal. Gebruik de sleutels van de array $ fonts als het lettertype in uw CSS-verklaring om dat lettertype te gebruiken. Laten we Tusj toepassen op alle h1 tas, Delicious Heavy op alle h2-tags en Tallys op alle h3-tags met een klasse van waarschuwingen.
h1 font-family: ffftusj, Georgia, serif; h2 font-family: deliciousheavy, Arial, sans-serif; h3.alert font-family: tallys, Arial, sans-serif;
Dat is het! De sterke tags met een id van "important" vallen terug op het standaardlettertype dat we hebben opgegeven in config-flir.php, in dit geval Delicious Heavy. De gegenereerde afbeeldingstekst wordt geschaald naar de lettergrootte die is opgegeven in de CSS. CSS-kleuren zullen ook doorgaan maar teksttransformaties niet.
Hoewel FLIR een vrij nette oplossing is voor het vervangen van tekstafbeeldingen, zijn er een paar kleine problemen. De PHP GD-bibliotheek geeft de fijne details niet goed weer, wat vrij opviel in het Tusj-lettertype. De bovenste tekst werd weergegeven in Photoshop en de onderste tekst werd weergegeven door de PHP GD-bibliotheek die door FLIR werd gebruikt.
Een andere conclusie van FLIR is dat het een webserver met PHP en de GD-bibliotheek vereist. De meeste gastheren hebben beide echter, dus dit is te verwaarlozen.
Een voordeel van FLIR ten opzichte van sIFR, de belangrijkste concurrent, is dat het eenvoudiger te implementeren is en geen Flash vereist om te creëren of te bekijken.
Zowel FLIR als sIFR zijn uitstekende oplossingen en zullen u goed van pas komen. De meeste bezoekers kunnen beide zonder veel moeite bekijken, maar voor de weinigen aan de rand van de belcurve die geen Flash hebben, is FLIR mogelijk een betere oplossing.
Accentsconagua