Voici le petit bout de code que j'ai dans mon script php pour ajouter automatiquement des légendes aux images (tirées des atributs "alt").
en gros, ca remplace dans un contenu tiré d'une base de données
($contenuXX) toutes les occurences <img src="toto.jpg" alt="blabla" /> par un <div> contenant l'image et un paragraphe légende de la largeur de l'image :
<div><img src="toto.jpg" alt="blabla" ></img>
<p style="width: $width;">blabla</p>
</div>
//TRAITEMENT DES IMAGES
//Dans le cms, on peut définir deux classes d'images : .imgGauche et .imgDroite
//On va mettre en légende le contenu de la balise alt
//Il faut détecter toutes les balises <img> ,
//<img width="164" height="200" class="imgDroite" src="/images/Image/braille-board_Opt.jpg" alt="Une tablette braille" longdesc="déscription longue test" />
//- La classe de l'image va être transferée au div
//- Si la largeur n'est pas définie dans l'image, on va tenter de la trouver à l'aide de getimagesize
//- La largeur sera également attribuée au paragraphe légende afin qu'il ne dépasse pas.
//on va remplacer l'image par un div de ce style...
//<div class="$class"><img width="$width" height="$height" alt="$texteAlt" longdesc="$longDesc" src="$src" />
//<p style="width: $width;">$texteAlt</p>
//</div>
function rechercheValeur($aTrouverXX,$tagXX){
//Cette fonction recherche la valeur d'un parametre $aTrouver se trouvant dans un tag
//et la retourne (false si le parametre n'est pas trouvé.)
//ex : rechercheValeur('width','<img class="test" width="300" src="toto.jpg">') va retourner 300
$aTrouverXX.="="; //on ajoute = ... y'a moins de chances de trouver width= que width dans le alt (ce qui serait chiant)
if($posXX=strpos($tagXX,$aTrouverXX){
$tempXX=substr($tagXX,$posXX+strlen($aTrouverXX)+1,strlen($tagXX)); //on vire le début
$tempXX=substr($tempXX,0,strpos($tempXX,'"')); //on vire la fin
return $tempXX;
}else{
return false;
}
}// fin rechercheValeur
//On recherche la première image
$nextPosImg=strpos($contenuXX,"<img");
while(($nextPosImg!==false)){
$imgXX=substr($contenuXX,$nextPosImg,strlen($contenuXX)); //on vire le début
$imgXX=substr($imgXX,0,strpos($imgXX,"/>")+2); //on vire la fin
if($nextPosImg!==false){
//on recherche $src
$srcXX=rechercheValeur("src",$imgXX);
//on recherche $alt
$altXX=rechercheValeur("alt",$imgXX);
//on recherche $longdesc
$longdescXX=rechercheValeur("longdesc",$imgXX);
//on recherche $class
$classXX=rechercheValeur("class",$imgXX);
//on recherche $width
$widthXX=rechercheValeur("width",$imgXX);
//on recherche $height
$heightXX=rechercheValeur("height",$imgXX);
}
//on calcule le div (on met TEMP à la place d'<img pour ne pas faire une boucle infinie...)
$divXX='<div class="'.$classXX.'"><TEMP src="'.$srcXX.'"';
//si alt existe
if($altXX){
$divXX.=' alt="'.$altXX.'"';
}
//si longdesc existe
if($longdescXX){
$divXX.=' longdesc="'.$longdescXX.'"';
}
//si width..
if($widthXX){
$divXX.=' width="'.$widthXX.'"';
}
//si height..
if($heightXX){
$divXX.=' height="'.$heightXX.'"';
}
//fin tag </img> début de la légende
//evidement, si y'avait des autres valeurs, elles vont gicler...
$divXX.='></img><p';
//si la largeur est définie dans l'image, on l'utilise... sinon, on va chercher la largeur de l'image avec getimagesize()
if(!$widthXX){
//ATTENTION, VA SUREMENT MERDER SI PHP TROUVE PAS L'IMAGE... ADAPTER LE CHEMIN...
$getImageSizeXX=getimagesize("../".$srcXX);
$widthXX=$getImageSizeXX[0];
}
//si la largeur est définie, on l'attribue au style du paragraphe pour que la légende ne dépasse pas.
if($widthXX){
$divXX.=' style="width:'.$widthXX.'px;"';
}
//contenu et fin de la légende, fin du div
$divXX.='>'.$altXX.'</p></div>';
//on remplace l'<img dans le contenu par le <div qu'on vient de calculer...
$contenuXX=str_replace($imgXX,$divXX,$contenuXX);
//position de l'image suivante
$nextPosImg=strpos($contenuXX,"<img");
}//end while y'a des <img
//on remet les <img à la place des <TEMP
$contenuXX=str_replace("<TEMP","<img",$contenuXX);
//et hop et voila... plus qu'a retourner...
echo($contenuXX);
//on peut styler .imgGauche et .imgDroite ainsi que .imgGauche img, .imgGauche p, etc...
Heu... voila... je sais pas si ça peut servir... ni si c'est compréhensible... et en plus, le contenu alt est dupliqué et peut-être détourné de son utilisation originale...
Vous pouvez voir ce que ca donne sur le site :
www.coeur.ch
Il y a des images un peu partout qui sont "légendées" avec cette méthode.
Modifié par Nathan- (28 Jan 2006 - 15:44)
