m |
m |
||
(25 révisions intermédiaires par 3 utilisateurs non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
− | + | {{TIP|DE=4|EN=3|ES=|FR=0|RU=}} | |
− | + | <noinclude>{{Trad|DE=Anleitung zum Schreiben/Bildergalerie|FR=Guide de rédaction/Galerie d'images|EN=Writing Guide/Image gallery|palette=wiki|H=1}}</noinclude> | |
Si l'on a plusieurs images, on peux utiliser la "galerie de fichiers". | Si l'on a plusieurs images, on peux utiliser la "galerie de fichiers". | ||
* Soit via la [[BarreOutilsW#Outils|barre d'outil en mode édition]] du wiki: cliquer sur Avancé pour développer le '''Mode Avancé''' comme dans l'image au dessus, de façon à voir l’icône juste '''à droite de "Insérer"'''. | * Soit via la [[BarreOutilsW#Outils|barre d'outil en mode édition]] du wiki: cliquer sur Avancé pour développer le '''Mode Avancé''' comme dans l'image au dessus, de façon à voir l’icône juste '''à droite de "Insérer"'''. | ||
Ligne 23 : | Ligne 23 : | ||
* Le code <nowiki><gallery>....</gallery></nowiki>, utilisé plus haut utilise par défaut le mode traditional. | * Le code <nowiki><gallery>....</gallery></nowiki>, utilisé plus haut utilise par défaut le mode traditional. | ||
− | Avec beaucoup d'images de tailles similaires: | + | Avec beaucoup d'images de tailles similaires, avec des balises caption (titre), widths (largeur) et heights (hauteur) :<br /> |
− | <gallery> | + | code: <nowiki><gallery caption="Un titre avec caption" widths="180px" heights="120px" >></nowiki> |
+ | <gallery caption="Un titre avec caption" widths="180px" heights="120px" >> | ||
+ | Dummy.png|L'emblème de l'ASA, ex de gallerie | ||
+ | Wiki-bar-insimg.png|Une description longue mais nécessaire à la page où figure cette galerie d'image, car on peux aussi ''mettre en forme'' ! | ||
+ | Dummy.png|Titre 1 | ||
+ | Dummy.png|Titre 2 | ||
+ | Dummy.png|Titre 3 | ||
+ | Dummy.png|Titre 4 | ||
+ | Dummy.png|Titre 5 | ||
+ | </gallery> | ||
+ | |||
+ | |||
+ | Et la meme avec le code <nowiki><gallery caption="en 50px" heights="50px" >></nowiki> | ||
+ | <gallery caption="en 50px" heights="50px" >> | ||
Dummy.png|L'emblème de l'ASA, ex de gallerie | Dummy.png|L'emblème de l'ASA, ex de gallerie | ||
Wiki-bar-insimg.png|Une description longue mais nécessaire à la page où figure cette galerie d'image, car on peux aussi ''mettre en forme'' ! | Wiki-bar-insimg.png|Une description longue mais nécessaire à la page où figure cette galerie d'image, car on peux aussi ''mettre en forme'' ! | ||
Ligne 34 : | Ligne 47 : | ||
</gallery> | </gallery> | ||
− | + | ||
+ | === La même, avec <nowiki><gallery mode=nolines></nowiki>=== | ||
<gallery mode=nolines> | <gallery mode=nolines> | ||
Barreswiki.png|Barre d'outil du mode édition de ce wiki | Barreswiki.png|Barre d'outil du mode édition de ce wiki | ||
Ligne 46 : | Ligne 60 : | ||
</gallery> | </gallery> | ||
− | + | === <nowiki><gallery mode=packed></nowiki> === | |
+ | Les images sont affichées avec une hauteur identique, la largeur pouvant varier pour respecter le ratio original. | ||
<gallery mode=packed> | <gallery mode=packed> | ||
Barreswiki.png|Barre d'outil du mode édition de ce wiki | Barreswiki.png|Barre d'outil du mode édition de ce wiki | ||
Ligne 52 : | Ligne 67 : | ||
Wiki-bar-insimg.png|Une description longue mais nécessaire à la page où figure cette galerie d'image, car on peux aussi ''mettre en forme'' ! | Wiki-bar-insimg.png|Une description longue mais nécessaire à la page où figure cette galerie d'image, car on peux aussi ''mettre en forme'' ! | ||
</gallery> | </gallery> | ||
+ | |||
avec <nowiki><gallery mode=packed></nowiki> moins l'image trop large : centré et gain de place | avec <nowiki><gallery mode=packed></nowiki> moins l'image trop large : centré et gain de place | ||
<gallery mode=packed> | <gallery mode=packed> | ||
Ligne 63 : | Ligne 79 : | ||
</gallery> | </gallery> | ||
− | packed-overlay | + | === <nowiki><gallery mode="packed-hover" heights=64px perrow=7 ></nowiki> === |
+ | <gallery mode="packed-hover" heights=64px perrow=7 > | ||
+ | File:Atrium_(GM)_guild.png|Support | ||
+ | File:Animation guild-icon.png|Animation | ||
+ | File:Level-Design guild icon.png|Level-Design | ||
+ | File:Lore Team guild-icon.png|Lore | ||
+ | File:Ryzom Forge Graphics guild-icon.png|Graphics | ||
+ | File:Ryzom InCode Developers guild-icon.png|Developers | ||
+ | File:Translation Team guild-icon.png|Translation | ||
+ | </gallery> | ||
+ | |||
+ | === mode=packed-overlay === | ||
+ | <nowiki><gallery mode=packed-overlay></nowiki> | ||
<gallery mode=packed-overlay> | <gallery mode=packed-overlay> | ||
Dummy.png|Ex 1 | Dummy.png|Ex 1 | ||
Ligne 74 : | Ligne 102 : | ||
</gallery> | </gallery> | ||
− | + | === Slideshow avec titre caption === | |
− | + | <nowiki><div style="max-width: 350px;"> <gallery caption="Titre exemple" mode=slideshow>... </gallery> | |
+ | </div></nowiki> | ||
<div style="max-width: 350px;"> | <div style="max-width: 350px;"> | ||
− | <gallery mode=slideshow> | + | <gallery caption="Titre exemple" mode=slideshow> |
− | + | Dummy.png|Description 1 | |
− | + | Wiki-bar-insimg.png|Une description longue mais nécessaire à la page où figure cette galerie d'image, car on peux aussi ''mettre en forme'' ! | |
+ | Dummy.png|Description 2 | ||
</gallery> | </gallery> | ||
</div> | </div> | ||
+ | Similaire (2 images) avec hauteur plus petite (heights="20px") est KO {{KO}} | ||
+ | <gallery heights="20px" mode=slideshow> | ||
+ | Dummy.png|Description 1 | ||
+ | Dummy.png|Description 2 | ||
+ | </gallery> | ||
== La syntaxe == | == La syntaxe == | ||
− | Source : https:// | + | Source : https://fr.wikipedia.org/wiki/Aide:Galerie et https://fr.wikipedia.org/wiki/Aide:Galerie/avanc%C3%A9e |
=== Attributs et valeurs utiles === | === Attributs et valeurs utiles === | ||
+ | Réduire la taille avec une balise div (un [[Tags PvP Roleplay|ex ici]]): <nowiki><div style="width:600px"> ... </div></nowiki> | ||
+ | |||
+ | {| class="wikitable alternance left" | ||
+ | |+ Options complémentaires image par image <br>''(à insérer à la suite des noms de fichiers)'' | ||
+ | |- | ||
+ | | | ||
+ | ! scope="col" style="width:530px;" | Effet | ||
+ | ! scope="col" style="width:400px;" | Notes | ||
+ | |- | ||
+ | ! scope="row" style="width:160px;" | alt=texte | ||
+ | | texte Insère un texte alternatif pour les non-voyants. | ||
+ | | 120 caractères max. | ||
+ | |- | ||
+ | ! scope="row" | <nowiki><div style="text-align:center;"></nowiki>texte<nowiki></div></nowiki> | ||
+ | | texte La légende sera centrée ''(corrige l'affichage justifié à gauche par défaut)'' | ||
+ | | | ||
+ | |- | ||
+ | ! scope="row" | <nowiki><div style="text-align:right;"></nowiki>texte<nowiki></div></nowiki> | ||
+ | | texte La légende sera justifiée à droite ''(corrige l'affichage justifié à gauche par défaut)'' | ||
+ | | | ||
+ | |- | ||
+ | ! scope="row" | <nowiki><div style="text-align:left;"></nowiki>texte<nowiki></div></nowiki> | ||
+ | | texte La légende sera justifiée à gauche (''corrige l'affichage centré du'' <code>mode=nolines</code>) | ||
+ | | | ||
+ | |} | ||
+ | {{clr|left}} | ||
+ | Les légendes sont justifiées à gauche par défaut, sauf pour le <code>mode=nolines</code> pour le moment. Il est possible de corriger l'affichage des légendes en utilisant du code HTML. | ||
+ | |||
+ | <noinclude> | ||
+ | [[catégorie:Aide|Galerie d'images]] | ||
+ | |||
+ | </noinclude> |
État des traductions → Cette page est l'une des 25 que nous aimerions voir traduites en français. |
Übersetzt • Proofreading in progress • No traducido • Original • Не переведено |
Si l'on a plusieurs images, on peux utiliser la "galerie de fichiers".
<gallery>
Image1.png|La description, date du lucio...
Dummy.png|Description 2
</gallery>
Cela facilite la lecture/modification du code wiki, car avec les balises gallery, chaque image sera sur une ligne (dans le code wiki), avec une syntaxe simple : nomdufichier.jpg la "barre verticale" (AltGr+6) et une description (pouvant être mis en forme, contenir des liens vers d'autres pages,...) :
Avec beaucoup d'images de tailles similaires, avec des balises caption (titre), widths (largeur) et heights (hauteur) :
code: <gallery caption="Un titre avec caption" widths="180px" heights="120px" >>
Et la meme avec le code <gallery caption="en 50px" heights="50px" >>
Les images sont affichées avec une hauteur identique, la largeur pouvant varier pour respecter le ratio original.
avec <gallery mode=packed> moins l'image trop large : centré et gain de place
<gallery mode=packed-overlay>
<div style="max-width: 350px;"> <gallery caption="Titre exemple" mode=slideshow>... </gallery> </div>
Similaire (2 images) avec hauteur plus petite (heights="20px") est KO ✗
Source : https://fr.wikipedia.org/wiki/Aide:Galerie et https://fr.wikipedia.org/wiki/Aide:Galerie/avanc%C3%A9e
Réduire la taille avec une balise div (un ex ici): <div style="width:600px"> ... </div>
Effet | Notes | |
---|---|---|
alt=texte | texte Insère un texte alternatif pour les non-voyants. | 120 caractères max. |
<div style="text-align:center;">texte</div> | texte La légende sera centrée (corrige l'affichage justifié à gauche par défaut) | |
<div style="text-align:right;">texte</div> | texte La légende sera justifiée à droite (corrige l'affichage justifié à gauche par défaut) | |
<div style="text-align:left;">texte</div> | texte La légende sera justifiée à gauche (corrige l'affichage centré du mode=nolines )
|
Les légendes sont justifiées à gauche par défaut, sauf pour le mode=nolines
pour le moment. Il est possible de corriger l'affichage des légendes en utilisant du code HTML.