Améliorer la gestion des marges des images incluses dans du texte

21 août 2005 — Attention, depuis la parution de la version 1.8.2 de SPIP, cet article est obsolète : il règle un problème qui n’existe plus. Cette page est conservée pour mémoire.

La version 1.8 de SPIP ne permet pas de différencier les marges latérales des images incluses dans du texte en fonction de l’alignement choisi pour ces images. Il n’est par exemple pas possible de faire en sorte qu’une image alignée à droite ait une marge de droite nulle et une marge gauche non nulle, et inversément.

Voici une solution peu-élégante mais très facile à mettre en place qui permet d’obtenir l’effet recherché, comme par exemple ici.

1. Placez le filtre suivant dans le fichier mes_fonctions.php3 ;

// Permet de différencier les marges gauche et droite des images incluses
// Auteur: François Schreuer - francois@schreuer.org
// Licence: GPL
function rectifier_marges_images($texte) {
	$texte = str_replace("class='spip_documents' style='float: left;",
		"class='spip_documents_left' style='float: left;",$texte);
	$texte = str_replace("class='spip_documents' style='float: right;",
		"class='spip_documents_right' style='float: right;",$texte);
	return $texte;
}

2. Ajoutez la définition des classes spip_documents_left et spip_documents_right dans votre feuille de style, par exemple de la façon suivante :

.spip_documents_left {
	margin-right: 0.5em;
	margin-bottom: 0.5em;
}

.spip_documents_right {
	margin-left: 0.5em;
	margin-bottom: 0.5em;
}

3. Appelez le filtre sur tous les champs dans lesquels des images sont incluses :

[(#TEXTE|rectifier_marges_images)]

4. Pour l’insertion de vos images dans les champs texte de SPIP, utilisez le raccourci <docxxx|right> ou <docxxx|left> où xxx est le numéro de l’image (et non <imgxxx|right>).