Écrire à côté d’une image (Créer un compte)

Oui c’est possible, c’est dans les options quand tu mets une image…

Par contre, c’est pas si facile que ça à gérer… Je n’ai eu que des problèmes avec la façon dont les éditeurs gèrent le texte avant les images alignées à droite…

Si ton texte est court, ça ira… Mais si tu as plusieurs lignes de texte à gauche de ton image, et que tu désires ensuite commencer un nouveau paragraphe (en dessous de ton image), dis-moi comment faire ! Personnellement, je n’y suis jamais arrivé et j’ai dû résoudre le problème en utilisant un tableau (une ligne et 2 cellules) : Je place le texte dans la cellule de gauche et l’image dans la cellule de droite.

Nevs,

Dans ce cas mets des vignettes (plus petites). Le visiteur n’a plus qu’à cliquer dessus pour voir l’image complète et cela te donne de la place pour mettre ton texte.

Pour un exemple, regarde : http://www.darloup.com/blog/?page_id=682

Le texte et l’image sont placés dans des cellules d’une table (comme décrit ci-dessus). La valeur ALT de l’image indique au visiteur qu’il doit cliquer sur l’image pour l’agrandir.

Pour montrer les images, j’utilise le plugin Lightbox 2.

Henry

Personnellement, j’utilise FCK Editor (qui est également en français) parce qu’il permet les multi sauts de lignes alors que TinyMce ne les permets pas.

Mais ces éditeurs possèdent tous les deux une fonction tableau qui, en mode « visuel », te permettra de déterminer le nombre de lignes (horizontal) et de colonnes (vertical).

Sinon, en mode « source », le code est tout simple (pour une ligne de deux cellules) :

<table>
<tbody>
<tr>
<td>tu places ton image (ou ton texte ici)</td>
<td>tu places ton texte (ou ton image ici)</td>
</tr>
</tbody>
</table>

Ne précise-pas la longueur : Ainsi, le tableau occupera toute la largeur de la page
Ne précise-pas la hauteur : Celle-ci sera automatiquement déterminée par la hauteur de ta vignette
Choisis un espacement de 30 (pixels) pour que le texte ne colle pas à l’image.

Une autre astuce consiste à créer un tableau de toujours une ligne, mais cette fois avec 3 cellules (au lieu de 2). Tu places ton texte et/ou image dans les cellules de droite et de gauche, et tu laisses la cellule du milieu « séparer » le texte de l’image. Ainsi, le texte et l’image seront « collées » aux marges de droite et de gauche – ce qui est plus joli.

Voici le code à utiliser :

<table>
<tbody>
<tr>
<td>tu places ton image (ou ton texte ici)</td>
<td>cette cellule, de largeur fixe, sépare e texte de l’image
<td>tu places ton texte (ou ton image ici)</td>
</tr>
</tbody>
</table>

Sinon, sur ma page http://www.darloup.com/blog/?page_id=682

voici le code source de la troisième image (la cathédrale Maria Reina)

<table cellspacing="1" cellpadding="1" align="center" border="0">
    <tbody>
        <tr>
            <td valign="middle"><a title="La cathédrale Maria Reina" rel="lightbox" href="http://www.darloup.com/blog/pix/pix21.jpg"><img title="(cliquer pour agrandir)" height="150" alt="" width="200" align="left" border="0" src="http://www.darloup.com/blog/pix/pix21.jpg" /> </a></td>
            <td width="30"> </td>
            <td valign="middle">Edifice assez décevant vu de l’extérieur (la façade est en béton armé; !), vous y trouverez néanmoins à l’intérieur de superbes vitraux et mosaïques par l’artiste Mario Ayala, ainsi qu’une superbe sculpture du Christ au dessus de l’autel</td>
        </tr>
    </tbody>
</table>

Explications :

* Tu peux oublier « cellspacing » et « cellpading » si tu le désires
* L’attribut align= »center » centrera ta table au milieu de la zone d’affichage – utile si ton texte est très court, mais inutile si ton texte est sur plusieurs lignes. Personnellement, j’utilise systématiquement cet attribut
* L’attribut valign= »middle » (dans la 1ère et dans la 3ème cellule) centrera ton image et ton texte de façon verticale – tu vois l’effet sur ma page
* Tu constateras que la 2ème cellule a une largeur fixe de 30 pixels (width= »30″). Cette cellule sépare donc le texte de l’image. Comme une cellule doit toujours être remplie, j’ai mis « &nbsp » à l’intérieur (un espace invisible)
Ne te préoccupes pas du code assez complexe de l’image (première cellule). Il est inséré par le plugin Lightbox 2. L’astuce est que, comme tu le vois, j’ai réduit les dimensions de mon image (ici 150 de hauteur et 200 de largeur). Elle s’affiche donc à l’écran comme une vignette de cette dimension. Mais, lorsque l’on clique dessus, le plugin la montre à l’écran dans sa taille originale.

J’espère que celà te sera utile. N’hésite pas à demander quoi que ce soit !

Henry

Je ne suis pas trop familier avec TinyMce (que je n’ai utilisé que quelques jours) mais je te considère vivement de le changer pour FCK editor http://wordpress.org/extend/plugins/fckeditor-for-wordpress-plugin/

Henry

Erm, que je sache, c’est plutôt le contraire ! Plus d’un demi-million de personnes utilisent justement FCK parce qu’elles ont assez de la façon dont Tiny « nettoie » le code. Et, pour moi, ne pas pouvoir insérer de muti-sauts de ligne était vraiment rédhibitoire !

Super – c’est le plus important ! Bonne chance !

Pour résoudre ton problème sans utiliser de tableau (bah… pas bo) il suffit de commencer le paragraphe que tu veux voir en dessou ainsi

(ou clear:left;) si tu as aligné ton image à gauche