• Vue
• Éditer
• Historique
• Imprimer
• Référencé par

Images

Autheurs (basique)

Mise en place d'images dans les pages

Pour placer une image dans une page, entrez l'adresse (url) de cette image dans le texte balisant la page.
N'importe quel texte alternatif (utilisé pour les bulles d'aide et les navigateurs n'affichant pas les images) est placé entre guillemets juste après l'adresse de l'image.

http://www.pmichaud.com/img/misc/pc.jpg"Trombones" | Les trombones en couleur sont mignons.

Les trombones en couleur sont mignons.

Les images peuvent être spécifiées en tant que fichiers téléchargés (c'est à dire,Attach:image.jpg) et utiliser les Liens InterMap. N'importe quel fichier terminé par .gif, .jpg, .jpeg, ou .png sera automatiquement traité en tant qu'image. (Voir Notes ci dessous pour les fichiers d'image sans extensions.)

Pour créer un lien sur une image (comme http://www.pmichaud.com/img/misc/pc.jpg par opposition à l'affichage de l'image en lui même), utilisez les doubles crochets bour baliser le lien, comme [[http://www.pmichaud.com/img/misc/pc.jpg]] ou [[Attach:image.jpg]].

Pour que l'image effectue le lien vers une autre adresse, utilisez l'image comme texte de lien comme [[http://www.pmwiki.org | Attach:image.jpg"PmWiki"]].

Légendes et habillage d'images

Une légende peut être ajoutée à l'image en utilisant un trait vertical et le texte de légende.

http://www.pmichaud.com/img/misc/pc.jpg"Trombones" | Figure 1

Figure 1

Normalement les images sont affichées séquenciellement dans un flot de texte. Pour habiller une image de texte tout en la justifiant à droite ou gauche, utilisez les Wiki Styles suivants : %lfloat% ou %rfloat%.

%lfloat% http://www.pmichaud.com/img/misc/gem.jpg | Ta Daaa!%% L'image est justifiée à gauche, et le texte s'écoule sur son côté droit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ta Daaa! L'image est justifiée à gauche, et le texte s'écoule sur son côté droit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Le saut de ligne forcé [[<<]] rompt le flux de texte, et celui-ci continue au bas de l'image.

%lfloat% http://www.pmichaud.com/img/misc/gem.jpg L'image est justifiée à gauche, et le texte s'écoule sur son côté droit. Le texte situé après la balise ''[@[[<<]]@]'' continue en dessous de l'image. [[<<]] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

L'image est justifiée à gauche, et le texte s'écoule sur son côté droit. Le texte situé après la balise [[<<]] continue en dessous de l'image. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Les styles %lframe% ou %rframe% placent un cadre autour de l'image et de sa légende.

%rframe% http://www.pmichaud.com/img/misc/gem.jpg | Ta Daaa!%% L'image est justifiée à droite, et le texte s'écoule sur sa gauche.

Ta Daaa! L'image est justifiée à droite, et le texte s'écoule sur sa gauche.

Utilisez %center% pour centrer une image. Utilisez %right% pour aligner une image à droite, sans habillage.

%center%http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | C'est amusant de travailler avec des trombones. %right% http://www.pmichaud.com/img/misc/gem.jpg | Ta Daaa!

C'est amusant de travailler avec des trombones. Ta Daaa!

Changement de taille des images

Pour changer la taille d'une image, utilisez %width=50px% ou %height=50px% devant l'image. Le style wiki %thumb% est un raccourci utile de %width=100px%.

%width=50px% http://www.pmichaud.com/img/misc/bubble.jpg \ %height=50px% http://www.pmichaud.com/img/misc/bubble.jpg \ %thumb% http://www.pmichaud.com/img/misc/bubble.jpg

Changer la taille d'une image modifie seulement son affichage dans le navigateur; il ne diminue pas le poids de l'image elle-même durant les transferts.

Les images retaillées avec %thumb% peuvent aussi être habillées d'un cadre, et également être utilisées comme lien.

%lframe thumb% [[http://www.pmichaud.com/img/misc/bubble.jpg | http://www.pmichaud.com/img/misc/bubble.jpg"Souffle sur la bulle"]] | [-Bulle-] %lframe thumb% http://www.pmichaud.com/img/misc/pc.jpg"Accroche le papier" | [-Trombones-] %lframe thumb% [[DocumentationIndex | http://www.pmichaud.com/img/misc/gem.jpg"Visitez l'index de documentation"]] | [[DocumentationIndex | [-Ta Daaa-]]]

Bulle Trombones Ta Daaa

Notes

• Un fichier d'image sans extension correcte peut être affiché en ajoutant une "fausse" extension via l'Url. Par exemple, si l'adresse url est http://www.exemple.com/script/tux, ajoutez lui une fausse "query string" avec une extension reconnue (par ex., http://www.exemple.com/script/tux?format=.png).

Voir aussi

• Cookbook:Images (en anglais) - Ajout de galeries, vignettes automatiques, images de fond etc.

Crédits

Les images de cette page proviennent de http://www.flickr.com et sont redistribuées sous license Creative Commons.

<< Liens | Index de la documentation | Règles de mise en forme >>