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>
+
 
 +
=== 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>
  
* avec <nowiki><gallery mode=packed></nowiki>
+
=== <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 ===
Slideshow
+
<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>
File:Dummy.png - Description 1
+
Dummy.png|Description 1
File: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'' !
 +
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://en.wikipedia.org/wiki/Help:Gallery_tag?uselang=fr
+
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;" | &nbsp;&nbsp;alt=texte
 +
| texte Insère un texte alternatif pour les non-voyants.
 +
| 120 caractères max.
 +
|-
 +
! scope="row"  | &nbsp;&nbsp;<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"  | &nbsp;&nbsp;<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"  | &nbsp;&nbsp;<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>

Version actuelle datée du 18 octobre 2023 à 09:49

    Script edit.png État des traductionsCette page est l'une des 25 que nous aimerions voir traduites en français.
De.png ÜbersetztGb.png Proofreading in progressEs.png No traducidoFr.png OriginalRu.png Не переведено

de:Anleitung zum Schreiben/Bildergalerie en:Writing Guide/Image gallery fr:Guide de rédaction/Galerie d'images

Si l'on a plusieurs images, on peux utiliser la "galerie de fichiers".

En mode d'édition d'une page, voici la barre d'outil d'édition du wiki, en Mode Avancé


<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,...) :

Sommaire

Des exemples

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" >>


La même, avec <gallery mode=nolines>

<gallery mode=packed>

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-hover" heights=64px perrow=7 >

mode=packed-overlay

<gallery mode=packed-overlay>

Slideshow avec titre caption

<div style="max-width: 350px;"> <gallery caption="Titre exemple" mode=slideshow>... </gallery> </div>

Similaire (2 images) avec hauteur plus petite (heights="20px") est KO

La syntaxe

Source : https://fr.wikipedia.org/wiki/Aide:Galerie et https://fr.wikipedia.org/wiki/Aide:Galerie/avanc%C3%A9e

Attributs et valeurs utiles

Réduire la taille avec une balise div (un ex ici): <div style="width:600px"> ... </div>

Options complémentaires image par image
(à insérer à la suite des noms de fichiers)
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.

Récupérée de « https://fr.wiki.ryzom.com/w/index.php?title=Guide_de_rédaction/Galerie_d%27images&oldid=80238 »