Share
La semaine dernière, Philo vous a montré comment implémenter sIFR3. Cette fois, je vais vous montrer comment implémenter Facelift Image Replacement (ou FLIR), une alternative au sIFR qui ne nécessite pas de Flash.
Notez que la démo utilise des polices différentes de celles utilisées dans le tutoriel pour des raisons de droits de copie..
La première étape consiste à télécharger FLIR. Décompressez le téléchargement et placez le dossier à l'intérieur de (facelift-1.1.1) quelque part sur votre serveur Web. J'ai renommé le dossier simplement "facelift" pour faciliter les choses.
Dans le dossier Facelift se trouve un fichier Javascript appelé "flir.js". Vous pouvez choisir de le laisser ici ou de le déplacer ailleurs, par exemple dans un dossier centralisé pour les fichiers Javascript. Pour ce tutoriel, nous allons le faire et le déplacer dans un dossier appelé "js" dans le répertoire racine de notre site.
Ouvrez maintenant flir.js dans votre éditeur de texte préféré et allez à la ligne 30. Cela devrait ressembler à ceci:
,chemin:"
Nous devons définir un chemin absolu ou relatif vers notre répertoire de lifting entre les deux guillemets simples. Cependant, les chemins relatifs sont relatifs à la page et non au fichier flir.js, ce qui peut entraîner des problèmes avec les sites qui utilisent mod_rewrite pour créer de jolies URL. Le moyen le plus sûr de tout faire fonctionner est de fournir un chemin absolu.
,path: '/ path / to / facelift /'
Ouvrez la page à laquelle vous souhaitez ajouter FLIR et ajoutez ce qui suit entre les balises head pour attacher flir.js:
Ajoutez ensuite le texte suivant juste avant la balise body de fermeture:
Cette étape est assez facile. Téléchargez les polices que vous souhaitez utiliser. Je vais utiliser Delicious, Tallys et Tusj. Placez vos polices dans le dossier "polices" du dossier "Facelift". Ouvrez config-flir.php et vous trouverez un bloc de code ressemblant à ceci:
// Chaque police que vous voulez utiliser doit avoir une entrée dans le tableau des polices. $ 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'; // La police par défaut sera la suivante (mettez ici la police la plus courante). $ fonts ['default'] = $ fonts ['puritan'];
Comme vous pouvez probablement le constater à partir des commentaires, chaque entrée du tableau $ fonts est une police du dossier fonts. La clé de tableau entre crochets correspond à ce que nous utilisons dans nos déclarations CSS lorsque nous voulons utiliser la police. Ajoutons les polices que nous avons téléchargées plus tôt.
$ fonts ['ffftusj'] = 'FFF Tusj.ttf'; $ fonts ['deliciousheavy'] = 'Delicious-Heavy.otf'; $ fonts ['tallys'] = 'Tallys_15.otf';
Tout ce qui est assigné à $ fonts ['default'] sera utilisé si une police n'est pas spécifiée. Faisons Delicious Heavy le défaut.
$ fonts ['default'] = $ fonts ['deliciousheavy'];
Le fichier config-flir.php contient un certain nombre d'autres paramètres, mais vous pouvez les laisser tels quels. Ce que chaque réglage fait est assez explicite et il y a des commentaires si vous voulez les ajuster.
Par défaut, FLIR remplacera les images uniquement pour les en-têtes. Vous pouvez spécifier ce qui doit être remplacé en transmettant un tableau de sélecteurs CSS à la fonction FLIR.auto () que nous avons ajoutée à l'étape 1..
FLIR.auto (['h1', 'h2', 'h3.alert', 'strong # important']);
Cela indiquera à FLIR d'appliquer le remplacement d'image aux balises h1, h2, h3 avec une classe de "alerte" et aux balises fortes avec un identifiant de "important"..
Il ne reste plus maintenant qu’à appliquer les styles CSS. Utilisez les clés du tableau $ fonts en tant que police dans votre déclaration CSS pour utiliser cette police. Permet d’appliquer Tusj à toutes les tâches h1, Delicious Heavy à toutes les balises h2 et Tallys à toutes les balises h3 avec une classe d’alerte..
h1 font-family: ffftusj, Géorgie, serif; h2 font-family: deliciousheavy, Arial, sans-serif; h3.alert font-family: tallys, Arial, sans-serif;
C'est tout! Les étiquettes fortes avec un identifiant "important" retomberont sur la police par défaut spécifiée dans le fichier config-flir.php, qui est dans ce cas Delicious Heavy. Le texte de l'image générée sera redimensionné à la taille de police spécifiée dans le CSS. Les couleurs CSS seront également appliquées, mais les transformations de texte ne seront pas prises en compte..
Bien que FLIR soit une solution plutôt soignée au remplacement d’image de texte, il existe quelques problèmes mineurs. La bibliothèque PHP GD ne rend pas très bien les détails, ce qui est assez visible dans la police Tusj. Le texte du haut a été affiché dans Photoshop et le texte du bas, dans la bibliothèque PHP GD utilisée par FLIR..
Un autre inconvénient de FLIR est qu’il faut un serveur Web avec PHP et la bibliothèque GD. Cependant, la plupart des hôtes ont les deux, donc c'est négligeable.
Un avantage de FLIR par rapport à sIFR, son principal concurrent, est qu’il est plus facile à mettre en oeuvre et que Flash n’a pas besoin de créer ou de visualiser.
Les solutions FLIR et sIFR sont d’excellentes solutions et vous serviront bien. La plupart des visiteurs pourront visualiser les deux sans trop de difficultés, mais pour les quelques utilisateurs situés au bord de la courbe en cloche qui n'ont pas Flash, FLIR pourrait être une meilleure solution..
Accentsconagua