« Modèle:Infobox V3/Image/Documentation » : différence entre les versions

Dernière version du 27 juin 2025 à 14:31

Note : Ceci est une page de documentation pour un modèle.

📘 Description[modifier le wikicode]

Ce modèle affiche jusqu’à trois images sous forme d’onglets grâce au système de navigation tabber. Il adapte automatiquement les images à une taille uniforme (300 px de haut, largeur 100 %) grâce à une classe CSS dédiée.

Ce système permet une présentation élégante et cohérente des images dans les infoboxes.

🔧 Syntaxe[modifier le wikicode]

Utilisation standard du modèle dans une infobox ou une page :

{{Infobox V3/Image
 | Image 1 =
 | Titre image 1 = 
 | Image caption 1 =
 | Image 2 =
 | Titre image 2 =
 | Image caption 2 =
 | Image 3 = NomImage3.jpg
 | Titre image 3 =
 | Image caption 3 =
}}

🧪 Exemples[modifier le wikicode]

Une seule image[modifier le wikicode]

{{Infobox V3/Image
 |Image 1= Image Blad Melkitim.png
 |Titre image 1= Drapeau de Dunwich
 |Image caption 1= 
}}

Deux images[modifier le wikicode]

{{Infobox V3/Image
 |Image 1=Localisation actoria (pays) sur continent.png
 |Titre image 1=Gouvernorats Unifiés d’Actoria
 |Image caption 1=
 |Image 2=GUA - Localisation.png
 |Titre image 2=Localisation
 |Image caption 2=
}}

Trois images[modifier le wikicode]

{{Infobox V3/Image
 |Image 1=Caphnir glyph.png
 |Titre image 1=Glyphe Caphnir
 |Image caption 1=
 |Image 2=Uldr glyph.png
 |Titre image 2= Glyphe Uldr
 |Image caption 2=
 |Image 3=Xøndrelđ glyph.png
 |Titre image 3= Glyphe Xøndrelđ
 |Image caption 3=
}}

🧩 Paramètres[modifier le wikicode]

Nom du paramètre	Description	Obligatoire
`Image 1`	Nom du fichier de la première image sans le préfixe File:	Oui
`Titre image 1`	Titre affiché au-dessus de la première image	Non
`Image caption 1`	Légende affichée sous la première image	Non
`Image 2`	Nom du fichier de la deuxième image	Non
`Titre image 2`	Titre affiché au-dessus de la deuxième image	Non
`Image caption 2`	Légende affichée sous la deuxième image	Non
`Image 3`	Nom du fichier de la troisième image	Non
`Titre image 3`	Titre affiché au-dessus de la troisième image	Non
`Image caption 3`	Légende affichée sous la troisième image	Non

⚠️ Les images 2 et 3 sont facultatives. Si seule l’image 1 est renseignée, elle s’affiche seule, sans onglets.

🧰 CSS recommandé[modifier le wikicode]

Pour que les images aient une taille cohérente et soient automatiquement rognées (crop), ajoute ce code dans `MediaWiki:Common.css` :

.infobox-portrait-cropped img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}

Et appelle les images dans le modèle comme ceci :

[[File:{{{Image 1}}}|class=infobox-portrait-cropped]]

🔗 Voir aussi[modifier le wikicode]

@@ Ligne 1 : / Ligne 1 : @@
-<noinclude><div class=documentation style="background-color: #e6f4ea;>
+<noinclude><div class=documentation style="background-color: #e6f4ea;">
 {{Sous-page de documentation}}</noinclude>
 == 📘 Description ==
-Ce modèle affiche un ou deux portraits dans une infobox, avec un titre et une légende facultatifs.
+Ce modèle affiche jusqu’à trois images sous forme d’onglets grâce au système de navigation <code>tabber</code>.
-Il s’adapte automatiquement :
+Il adapte automatiquement les images à une taille uniforme (300 px de haut, largeur 100 %) grâce à une classe CSS dédiée.
-* à '''une seule image''', qu’il affiche en grand (250px),
-* ou à '''deux images''', qu’il présente dans un onglet interactif avec le modèle <code><tabber></code>.
+Ce système permet une présentation élégante et cohérente des images dans les infoboxes.
 == 🔧 Syntaxe ==
-<syntaxhighlight lang="text">
+Utilisation standard du modèle dans une infobox ou une page :
-{{Infobox V3/Portrait
+<pre>
-  |Portrait 1=Nom_fichier1.jpg
+{{Infobox V3/Image
-  |Titre portrait 1=Titre de la première image
+  | Image 1 =
-  |Portrait caption 1=Légende de la première image
+  | Titre image 1 =
-  |Portrait 2=Nom_fichier2.jpg
+  | Image caption 1 =
-  |Titre portrait 2=Titre de la deuxième image
+ | Image 2 =
-  |Portrait caption 2=Légende de la deuxième image
+ | Titre image 2 =
+  | Image caption 2 =
+ | Image 3 = NomImage3.jpg
+  | Titre image 3 =
+  | Image caption 3 =
 }}
-</syntaxhighlight>
+</pre>
 == 🧪 Exemples ==
-=== Un seul portrait ===
+=== Une seule image ===
+<div>
 {{Infobox V3/Début Documentation}}
-{{Infobox V3/Portrait
+{{Infobox V3/Image
-  |Titre portrait 1=Portrait officiel
+  |Titre image 1= Drapeau de Dunwich
-  |Portrait 1=Portrait Blad Melkitim.png
+  |Image 1= Dunwich Drapeau.png
-  |Portrait caption 1= Blad Melkitim
+  |Image caption 1=
 }}
 {{Infobox V3/Fin Documentation}}
 <pre>
-{{Infobox V3/Portrait
+{{Infobox V3/Image
-  |Titre portrait 1=Portrait officiel
+  |Image 1= Image Blad Melkitim.png
-  |Portrait 1=Portrait Blad Melkitim.png
+  |Titre image 1= Drapeau de Dunwich
-  |Portrait caption 1=
+  |Image caption 1=
 }}
 </pre>
 {{clr}}
+</div>
-=== Deux portraits ===
+=== Deux images ===
-{{Infobox V3/Début}}
+<div>
-{{Infobox V3/Portrait
+{{Infobox V3/Début Documentation}}
-  |Portrait 1=Ejheril Reïls portrait.png
+{{Infobox V3/Image
-  |Titre portrait 1=Portrait officiel
+  |Image 1=Localisation actoria (pays) sur continent.png
-  |Portrait caption 1=
+  |Titre image 1=Gouvernorats Unifiés d’Actoria
-  |Portrait 2=Ejheril Reïls portrait jeune.png
+  |Image caption 1=
-  |Titre portrait 2=Portrait officiel
+  |Image 2=GUA - Localisation.png
-  |Portrait caption 2=
+  |Titre image 2=Localisation
+  |Image caption 2=
 }}
-{{Infobox V3/Fin}}
+{{Infobox V3/Fin Documentation}}
+<pre>
+{{Infobox V3/Image
+ |Image 1=Localisation actoria (pays) sur continent.png
+ |Titre image 1=Gouvernorats Unifiés d’Actoria
+ |Image caption 1=
+ |Image 2=GUA - Localisation.png
+ |Titre image 2=Localisation
+ |Image caption 2=
+}}
+</pre>
+{{clr}}
+</div>
+=== Trois images ===
+<div>
+{{Infobox V3/Début Documentation}}
+{{Infobox V3/Image
+ |Image 1=Caphnir glyph.png
+ |Titre image 1=Glyphe Caphnir
+ |Image caption 1=
+ |Image 2=Uldr glyph.png
+ |Titre image 2= Glyphe Uldr
+ |Image caption 2=
+ |Image 3=Xøndrelđ glyph.png
+ |Titre image 3= Glyphe Xøndrelđ
+ |Image caption 3=
+}}
+{{Infobox V3/Fin Documentation}}
 <pre>
-{{Infobox V3/Portrait
+{{Infobox V3/Image
-  |Portrait 1=Ejheril Reïls portrait.png
+  |Image 1=Caphnir glyph.png
-  |Titre portrait 1=Portrait officiel
+  |Titre image 1=Glyphe Caphnir
-  |Portrait caption 1=
+  |Image caption 1=
-  |Portrait 2=Ejheril Reïls portrait jeune.png
+  |Image 2=Uldr glyph.png
-  |Titre portrait 2=Portrait officiel
+  |Titre image 2= Glyphe Uldr
-  |Portrait caption 2=
+  |Image caption 2=
+ |Image 3=Xøndrelđ glyph.png
+ |Titre image 3= Glyphe Xøndrelđ
+ |Image caption 3=
 }}
 </pre>
 {{clr}}
+</div>
 == 🧩 Paramètres ==
 {| class="wikitable"
-! Paramètre !! Description !! Obligatoire
+! Nom du paramètre !! Description !! Obligatoire
+|-
+| <code>Image 1</code> || Nom du fichier de la première image sans le préfixe File: || Oui
+|-
+| <code>Titre image 1</code> || Titre affiché au-dessus de la première image || Non
 |-
-| <code>Portrait 1</code> || Nom du fichier image principal || Oui ✅
+| <code>Image caption 1</code> || Légende affichée sous la première image || Non
 |-
-| <code>Titre portrait 1</code> || Titre au-dessus de la première image || Non
+| <code>Image 2</code> || Nom du fichier de la deuxième image || Non
 |-
-| <code>Portrait caption 1</code> || Légende sous la première image || Non
+| <code>Titre image 2</code> || Titre affiché au-dessus de la deuxième image || Non
 |-
-| <code>Portrait 2</code> || Nom du second fichier image || Non
+| <code>Image caption 2</code> || Légende affichée sous la deuxième image || Non
 |-
-| <code>Titre portrait 2</code> || Titre au-dessus de la deuxième image || Non
+| <code>Image 3</code> || Nom du fichier de la troisième image || Non
 |-
-| <code>Portrait caption 2</code> || Légende sous la deuxième image || Non
+| <code>Titre image 3</code> || Titre affiché au-dessus de la troisième image || Non
+|-
+| <code>Image caption 3</code> || Légende affichée sous la troisième image || Non
 |}
-== Comportement ==
+⚠️ Les images 2 et 3 sont facultatives. Si seule l’image 1 est renseignée, elle s’affiche seule, sans onglets.
-* Si <code>Portrait 2</code> est fourni, les deux portraits sont affichés dans des onglets <code><tabber></code>.
-* Si seul <code>Portrait 1</code> est présent, il est affiché centré avec son titre et sa légende (si fournis).
-* Si aucun portrait n’est renseigné, rien ne s’affiche.
 == 🧰 CSS recommandé ==
+Pour que les images aient une taille cohérente et soient automatiquement rognées (crop), ajoute ce code dans `MediaWiki:Common.css` :
-Ajoute ces règles à ta page <code>MediaWiki:Common.css</code> si ce n’est pas encore fait :
+<pre>
-<syntaxhighlight lang="css">
+.infobox-portrait-cropped img {
-.infobox-center {
+    width: 100%;
-  text-align: center;
+    height: 300px;
-  margin: 0 auto;
+    object-fit: cover;
+    object-position: center;
 }
+</pre>
-.infobox-LO {
+Et appelle les images dans le modèle comme ceci :
-  padding: 0.5em;
+<pre>
-}
+[[File:{{{Image 1}}}|class=infobox-portrait-cropped]]
+</pre>
-.infobox-caption {
-  font-size: 90%;
-  font-style: italic;
-  margin-top: 0.3em;
-}
-</syntaxhighlight>
-== Voir aussi ==
-* [[Modèle:Infobox V3/Début]]
-* [[Modèle:Infobox V3/Fin]]
-* [[Modèle:Infobox V3/Tableau Ligne mixte]]
-[[Catégorie:Modèle d’infobox]]
+== 🔗 Voir aussi ==
-[[Catégorie:Infobox V3]]
+{{Infobox V3/Palette/Infobox V3}}
-[[Catégorie:Modèle avec image]]