SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 215 visiteurs en ce moment

Accueil > Affichage multimédia > Images > Traitement d’images > Mettre un titre en image avec police TrueType

Mettre un titre en image avec police TrueType

14 juillet 2005 – par jonathan – commentaire

1 vote

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Afficher le titre d’un article en tant qu’image en utilisant une police TrueType.

La raison d’être

Vous savez sans doute qu’il est impossible d’être sûr que la police de caractères que vous avez choisi sera celle effectivement affichée sur l’écran de vos visiteurs. Une seule solution à cela : utiliser des images.

Mais pour une système dynamique tel que SPIP, il faut également que les images soient générées dynamiquement.
Pour cela je vous propose d’utiliser un filtre dans le fichier mes_fonctions.php3 et la librairie GD de PHP.

Comment s’y prendre

La première chose à faire est d’ajouter la fonction suivante dans votre fichier mes_fonctions :

function enimage($texte,$taille=20,$align="centre"){
return "<img
src=\"/IMG/img.php?texte=$texte&taille=$taille&align=$align\"
alt=\"$texte\" />";
}

Puis vous devez créer un fichier nommé img.php dans le dossier IMG, et y coller ceci :

<?

$welcome_img= imagecreatefrompng("welcome_img.png");
//image de fond a utiliser (en .png)

$text_color=imagecolorallocate($welcome_img,51,0,150);
//couleur du texte

$font="gothicb.ttf";
//police de caracteres
$path="/data/www/m/o/ndomaine.com/html/images/";
//Chemin vers la police
$path="d:\\html\\spip\\IMG\\";

/* Rien a changer apres ceci
-----------------------------
*/

$taille=$HTTP_GET_VARS["taille"];
$texte=$HTTP_GET_VARS["texte"];
$align=$HTTP_GET_VARS["align"];
$box=imagettfbbox ($taille, 0, $path.$font, $texte);
$width=$box[4]-$box[6];
if ($align=="centre"){
$px  = (imagesx($welcome_img)-$width)/2;
}elseif($align=="gauche"){
$px  = 4;
}elseif($align=="droite"){
$px  = imagesx($welcome_img)-$width-5;
}

imagettftext ($welcome_img,$taille,0, $px, 38, $text_color, $path.$font, $texte);
imagesavealpha ( $welcome_img, TRUE);
header("Content-Type: image/png");
header("Expires: " . date("r", time()+7*24*60*60));
imagepng($welcome_img);

?>

Modifier le fichier img.php

Il faut editer quelques lignes :
Dans celle-ci,
$welcome_img= imagecreatefrompng("welcome_img.png");
remplacez « welcome_img.png » par le nom de votre image (au format png).

$text_color=imagecolorallocate($welcome_img,51,0,150);
ici, il faut changer les chiffres pour choisir la couleur au format RGB.

$font est le nom de la police à utiliser et $path est le chemin absolu vers cette police.
Chez mon hebergeur, le chemin absolu de la racine est /data/www/m/o/ndomaine.com/html/, et chez le vôtre ca depend...
On peut l’obtenir grâce à la variable $_SERVER['DOCUMENT_ROOT'] puis y ajouter le chemin relatif vers le fichier de la police de caractère, chez moi /images/, ce qui donne :
/data/www/m/o/ndomaine.com/html/images/

Utiliser le filtre

Pour appeler le filtre, il suffit de faire par exemple :
[(#TITRE|enimage)]

Vous pouvez aussi changer la taille du texte par défaut en faisant :
[(#TITRE|enimage{$taille=50})]
ou la hauteur du texte est exprimée en pixels.
On peut aussi changer l’alignement par rapport aux bords de l’image en faisant au choix :
[(#TITRE|enimage{$align="gauche"})],
[(#TITRE|enimage{$align="centre"})], ou
[(#TITRE|enimage{$align="droite"})]
Il est bien sur possible de combiner les deux comme ceci :
[(#TITRE|enimage{$align="droite", $taille=30})]

Le résultat

Voici un exemple de ce qu’il est possible d’obtenir :

Capture d’écran
L’article mis en pratique sur www.parimaterra.org

Avertissement

Attention à une chose toutefois : les images n’étant pas mise en cache, elles sont recalculées à chaque chargement de la page, ce qui sur des sites à forte fréquentation et/ou en hébergement mutualisé, peuvent causer quelques ralentissements et une charge plus importante du serveur.

Chaque cas étant particulier, vous pouvez essayer cette méthode, et si les ralentissements sont trop fréquents, l’abandonner, ou mieux, développer un sytème de cache.

P.-S.

Cette contribution n’est à employer que sur une version 1.7.2 ou 1.8

à cette date, la version de développement de SPIP propose cette fonctionalité avec gestion du cache.

Dernière modification de cette page le 23 septembre 2007

Retour en haut de la page

Vos commentaires

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • La balise #ENV

    25 septembre 2007 – 64 commentaires

    Régulièrement, on lit sur la liste ou sur IRC « la balise #ENV, j’y comprends rien » . Tentons ici une explication sur le pourquoi du comment de cette balise... #ENV, qu’est-ce à dire ? Si nous lisons la documentation officielle, nous voyons que (...)

  • Champs Extras 3

    16 janvier 2012 – 589 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Plugin Modèles media

    25 avril 2011 – 171 commentaires

    Les modèles , et produisent chacun un résultat différent et ce résultat, pour les images, dépend du fait qu’elle soit dans le portfolio ou non. Ce plugin propose une nouvelle série de modèles ayant un comportement unifié et indépendant du mode des (...)

  • Qrcode

    3 novembre 2010 – 43 commentaires

    Les QrCodes sont des codes barres lisibles essentiellement par les téléphones portables et permettent d’échanger avec ceux-ci diverses informations, et en particulier des liens. Ce plugin à pour objet de permettre à spip d’utiliser des QrCodes pour (...)

  • Mise à jour automatique des plugins

    5 octobre 2009 – 156 commentaires

    Une nouvelle lame du Couteau Suisse permet de visualiser les plugins nécessitant une mise à jour, tout comme SPIP lui-même ! Présentation Rendons à César ce qui est à César, voici un extrait de la présentation du Couteau Suisse pour sa lame « Mise (...)

Ça spipe par là