De EncyclopAtys
m (→Slideshow avec titre caption) |
m |
||
(14 révisions intermédiaires par 2 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 61 : | Ligne 61 : | ||
=== <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 66 : | 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 88 : | Ligne 90 : | ||
</gallery> | </gallery> | ||
− | === mode packed-overlay === | + | === 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 98 : | Ligne 101 : | ||
Dummy.png|Titre 5 | Dummy.png|Titre 5 | ||
</gallery> | </gallery> | ||
− | |||
=== Slideshow avec titre caption === | === Slideshow avec titre caption === | ||
− | <nowiki><div style="max-width: 350px;"> <gallery caption="Titre exemple" mode=slideshow></nowiki> | + | <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 caption="Titre exemple" mode=slideshow> | <gallery caption="Titre exemple" mode=slideshow> | ||
Ligne 117 : | Ligne 120 : | ||
== 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> |
Version actuelle datée du 18 octobre 2023 à 09:49
É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".
- Soit via la 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 directement via le code wiki - ce qui s'avère dans ce cas le plus simple, en insérant par exemple ce simple code:
<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
- Le code <gallery>....</gallery>, utilisé plus haut utilise par défaut le mode traditional.
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>
<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>
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.