Rechercher dans le site
fontsizeup fontsizedown

Insertion des images dans un article (2)

Une liste avec photos
dimanche 31 août 2008
popularité : 1%

Après mon premier article autour de ce sujet (Insertion des images dans un article, publié ici le jeudi 12 juillet 2007) et suite à mes remarques, j’ai conclu que certains auteurs ont des difficultés à bien exploiter les images dans leurs articles.

Dans cet article, je ne vais pas revenir sur "Comment insérer des images .. ", mais je vais essayer de traiter un problème qui se pose régulièrement et qui apparait clairement dans l’article "Ces gens du bureau fédéral ", publié ici le jeudi 28 août 2008.

Dans cet article, l’auteur nous présentait une liste des membres de bureau fédéral avec photos.

L’auteur a bien su ajouter les images, mais il y a un problème d’alignement :

PNG - 189.3 ko

Dans l’aperçu repris ici (encadré en rouge), les photos sont alignées d’une manière incorrecte : il aurait mieux valu que chaque photo soit alignée au début de ligne.

Dans ce qui suit, je vais essayer d’illustre le problème avec un autre exemple de présentation d’une liste avec photos.

Exemple de liste avec photos :
Dans cet exemple, on citera la liste des administrateurs de Maroc-Echecs (quelques administrateurs)

JPEG - 10.3 ko Mourad Metioui :
Rédacteur chef.

... Ici le texte descriptif relatif à cet administrateur ..
 

JPEG - 10.1 ko Boujemâ Kariouch :
Rédacteur chef adjoint

... Ici le texte descriptif relatif à cet administrateur ..

JPEG - 7.9 ko Abdelaziz Onkoud :

... Ici le texte descriptif relatif à cet administrateur ..

JPEG - 5.5 ko Karim Ismail :

... Ici le texte descriptif relatif à cet administrateur ..

JPEG - 36.6 ko Mohammed Moubarek Rian :

... Ici le texte descriptif relatif à cet administrateur ..

JPEG - 3.3 ko Mohammed Tissir :

... Ici le texte descriptif relatif à cet administrateur ..

Dans cet exemple, les photos sont toutes alignées à gauche et la liste est plus claire : Chaque élément (photo et texte) de la liste est bien séparé de l’autre.
Par contre, dans l’exemple de l’article " Ces gens du bureau fédéral " les élements de la liste ne sont pas séparés.

Comment y arriver ?

Comme on le sait déjà, Spip permet l’insertion des images à l’aide du Tag : <imgXXX|left> Ou <imgXXX|center> Ou <imgXXX|right>

Avec :
XXX et un numéro généré automatiquement par Spip une fois qu’on a joint l’image à l’article.
et left, center ou right pour l’alignement.

Dans les 2 exemples, l’alignement est "left", ce qui donne une image alignée à gauche avec un texte commençant du coté haut de l’image.
Tout ce qui est ajouté après la première image est considéré comme le texte qui la suit (même les autres images), alors le retour à la ligne n’est forcé que par la largeur de la page comme il est clair dans le premier exemple (Ces gens du bureau fédéral).

Pour remédier à cela et obtenir une liste correctement alignée comme dans le cas du 2ème exemple, il suffit de séparer les élements par <br clear="left">

Exemple

<img7398|left>Metioui Mourad :<br>Rédacteur chef.<p> <font color="#FF0000">... Ici le texte descriptif relatif à cet administrateur ..</font> <br clear="left"><p>

<img7400|left>Kariouch Boujemâ :<br>Rédacteur chef adjoint<p> <font color="#FF0000">... Ici le texte descriptif relatif à cet administrateur ..</font><br clear="left"><p>

Note : La valeur clear est toujours l’alignement de l’image
<br clear="left"> Ou <br clear="right">

Bonne continuation.



Commentaires

Logo de Boujemâ Kariouch
lundi 1er septembre 2008 à 17h39, par  Boujemâ Kariouch

Cher Monsieur Ezziani,

Veuillez bien recevoir toute ma gratitude. Cette information technique est bien précieuse. J’apprend énormément de vous.

Très respectueusement.

Boujemâ Kariouch

Logo de youness fareh
dimanche 31 août 2008 à 22h00, par  youness fareh

Merci infiniment Abdenbi pour cette contribution technique ..

Navigation