Tuto: Exploiter n'importe quelle police dans vos pages HTML avec FLIR

Bonjour

J'ai suivis ce tuto dans son intégralité, mais au finale, je me retrouve avec du texte qui a bien été transformé en image, mais j'ai beau changer de police, rien n'y fait...

J'ai renommé le dossier 'facelift' en 'police' et j'ai laissé le script dans le dossier.
Donc j'ai laissé ,path: ''
Même en mettant le chemin absolu, c'est pas mieux
J'ai fais les modifs dans la feuille css pour appliquer les changement à mes titres h1.
.page h1 {
text-align:center;
font-family: chopin, Arial, Helvetica, sans-serif;
}
Et j'ai rajouté
<script type="text/javascript">
FLIR.init();
FLIR.auto([ 'h1' ]);
</script>
Dans la page auquel je veux appliquer les changements.
Malgré sa la police de change jamais, bien qu'elle soit bel et bien une image

Merci de votre aide

Salut MacBernie,
si j'ai bien compris ton problème, FLIR génère bien des images mais avec la police Arial ?

Je te propose d'essayer plusieurs choses (de la plus simple à la plus complexe à tester, suivant ton niveau bien-sûr) :


1. Tu ne peux pas laisser vide le chemin qui pointe sur le script (à moins d'avoir placé le contenu du dossier facelift/ à la racine de ton site, mais ce n'est pas ce que tu sembles expliquer). Donc dans ton cas, il faut mettre :

,path: 'police/'

1b. Tu peux essayer tout bêtement ceci, mais je n'y crois pas trop...

<script type="text/javascript">
FLIR.init();
FLIR.auto([ '.page h1' ]);
</script>

2. Vérifier que ton serveur web supporte bien PHP et (surtout!) la librairie GD.
Pour cela, créer un fichier phpinfo.php dans lequel tu peux copier/coller le code suivant :

<?php phpinfo(); ?>

Lancer le fichier depuis le navigateur (www.ton-site.com/phpinfo.php). Il fera apparaître une page d'informations sur la manière dont est configuré PHP sur ton serveur.
Il faut que la mention "GD Support" soit "enabled".

Remarque : tu n'as pas précisé si tu bossais en local ou depuis un serveur distant, mais quoi qu'il en soit tu ne peux pas lancer le script en local sans passer par un environnement serveur "simulé" à l'aide d'un outil comme EasyPHP.



3. (Erreur que j'ai faite et c'est pour ça que j'insiste dessus dans le tutoriel) Tu n'as peut-être pas modifié les droits en écriture du dossier police/ et de son sous-dossier "cache/". Il faut leur appliquer un chmod 775, sinon le script ne peut pas générer (écrire) les images sur le serveur.
Modifié par FrankHTML (23 Jul 2010 - 17:27)

Bonjour,

Les conseils de FrankHTML sont précieux. Mais avant de vérifier que tout se passe bien côté serveur, il faudrait vérifier que tout se passe bien côté client. C'est à dire du côté du code HTML et JavaScript.

1. Est-ce que tu as des erreurs JavaScript retournées dans la console JS?
2. Est-ce que le DOM est modifié par FLIR pour les éléments visés?

Je m'explique pour la modification du DOM, au cas où. Donc si dans ton code HTML tu as ceci:

<h1>Mon titre</h1>

une fois FLIR exécuté le DOM, c'est à dire la représentation du document HTML dans la mémoire du navigateur, devrait ressembler à ceci:

<h1><img alt="Mon titre" src="class="flir-image" src="/js/facelift/generate.php?blabla plein de paramètres"></h1>

Si tu n'as pas l'habitude, sache que tu peux vérifier à quoi ressemble ton code HTML dans le DOM (donc suite aux modifications faites en JavaScript, notamment) en utilisant un outil tel que Firebug (extension pour Firefox) ou Web Inspector (Chrome, Safari), par exemple. Le simple mode «Afficher la source de la page» ne te montrera pas les modifications faites par FLIR.