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

Dernière version du 27 juin 2025 à 07:46

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

📘 Description[modifier le wikicode]

Ce modèle affiche jusqu’à trois portraits 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 portraits dans les infoboxes.

🔧 Syntaxe[modifier le wikicode]

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

{{NomDuModèle
 | Portrait 1 = NomImage1.jpg
 | Titre portrait 1 = Légende 1
 | Portrait caption 1 = Description 1
 | Portrait 2 = NomImage2.jpg
 | Titre portrait 2 = Légende 2
 | Portrait caption 2 = Description 2
 | Portrait 3 = NomImage3.jpg
 | Titre portrait 3 = Légende 3
 | Portrait caption 3 = Description 3
}}

🧪 Exemples[modifier le wikicode]

Un seul portrait[modifier le wikicode]

{{Infobox V3/Portrait
 |Titre portrait 1=Portrait officiel
 |Portrait 1=Portrait Blad Melkitim.png
 |Portrait caption 1=
}}

Deux portraits[modifier le wikicode]

{{Infobox V3/Portrait
 |Portrait 1=Ejheril Reïls portrait.png
 |Titre portrait 1=Portrait officiel
 |Portrait caption 1=
 |Portrait 2=Ejheril Reïls portrait jeune.png
 |Titre portrait 2=Portrait officiel
 |Portrait caption 2=
 |Portrait 3=
 |Titre portrait 3=
 |Portrait caption 3=
}}

Trois portraits[modifier le wikicode]

{{Infobox V3/Portrait
 |Portrait 1=Ejheril Reïls portrait.png
 |Titre portrait 1=Portrait officiel
 |Portrait caption 1=
 |Portrait 2=Ejheril Reïls portrait jeune.png
 |Titre portrait 2=Portrait officiel
 |Portrait caption 2=
 |Portrait 3=Ejheril Reïls portrait jeune.png
 |Titre portrait 3=Portrait officiel
 |Portrait caption 3=
}}

🧩 Paramètres[modifier le wikicode]

Nom du paramètre	Description	Obligatoire
`Portrait 1`	Nom du fichier de la première image sans le préfixe File:	Oui
`Titre portrait 1`	Titre affiché au-dessus de la première image	Non
`Portrait caption 1`	Légende affichée sous la première image	Non
`Portrait 2`	Nom du fichier de la deuxième image	Non
`Titre portrait 2`	Titre affiché au-dessus de la deuxième image	Non
`Portrait caption 2`	Légende affichée sous la deuxième image	Non
`Portrait 3`	Nom du fichier de la troisième image	Non
`Titre portrait 3`	Titre affiché au-dessus de la troisième image	Non
`Portrait 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 portraits aient une taille cohérente et soient automatiquement rognés (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:{{{Portrait 1}}}|class=infobox-portrait-cropped]]

🔗 Voir aussi[modifier le wikicode]

@@ Ligne 1 : / Ligne 1 : @@
 <noinclude><div class=documentation style="background-color: #e6f4ea;>
 {{Sous-page de documentation}}</noinclude>
-<p>Lien vers la [[Modèle:{{PAGENAME}}/Documentation|documentation du modèle]].</p>
 == 📘 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 portraits 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 portraits 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
+{{NomDuModèle
-  |Titre portrait 1=Titre de la première image
+  | Portrait 1 = NomImage1.jpg
-  |Portrait caption 1=Légende de la première image
+  | Titre portrait 1 = Légende 1
-  |Portrait 2=Nom_fichier2.jpg
+  | Portrait caption 1 = Description 1
-  |Titre portrait 2=Titre de la deuxième image
+  | Portrait 2 = NomImage2.jpg
-  |Portrait caption 2=Légende de la deuxième image
+  | Titre portrait 2 = Légende 2
+  | Portrait caption 2 = Description 2
+ | Portrait 3 = NomImage3.jpg
+ | Titre portrait 3 = Légende 3
+ | Portrait caption 3 = Description 3
 }}
-</syntaxhighlight>
+</pre>
 == 🧪 Exemples ==
 === Un seul portrait ===
+<div>
 {{Infobox V3/Début Documentation}}
 {{Infobox V3/Portrait
@@ Ligne 38 : / Ligne 42 : @@
 </pre>
 {{clr}}
+</div>
 === Deux portraits ===
-{{Infobox V3/Début}}
+<div>
+{{Infobox V3/Début Documentation}}
+{{Infobox V3/Portrait
+ |Portrait 1=Ejheril Reïls portrait.png
+ |Titre portrait 1=Portrait officiel
+ |Portrait caption 1=
+ |Portrait 2=Ejheril Reïls portrait jeune.png
+ |Titre portrait 2=Portrait officiel
+ |Portrait caption 2=
+ |Portrait 3=
+ |Titre portrait 3=
+ |Portrait caption 3=
+}}
+{{Infobox V3/Fin Documentation}}
+<pre>
+{{Infobox V3/Portrait
+ |Portrait 1=Ejheril Reïls portrait.png
+ |Titre portrait 1=Portrait officiel
+ |Portrait caption 1=
+ |Portrait 2=Ejheril Reïls portrait jeune.png
+ |Titre portrait 2=Portrait officiel
+ |Portrait caption 2=
+ |Portrait 3=
+ |Titre portrait 3=
+ |Portrait caption 3=
+}}
+</pre>
+{{clr}}
+</div>
+=== Trois portraits ===
+<div>
+{{Infobox V3/Début Documentation}}
 {{Infobox V3/Portrait
   |Portrait 1=Ejheril Reïls portrait.png
@@ Ligne 48 : / Ligne 85 : @@
   |Titre portrait 2=Portrait officiel
   |Portrait caption 2=
+ |Portrait 3=Ejheril Reïls portrait jeune.png
+ |Titre portrait 3=Portrait officiel
+ |Portrait caption 3=
 }}
-{{Infobox V3/Fin}}
+{{Infobox V3/Fin Documentation}}
 <pre>
 {{Infobox V3/Portrait
@@ Ligne 58 : / Ligne 98 : @@
   |Titre portrait 2=Portrait officiel
   |Portrait caption 2=
+ |Portrait 3=Ejheril Reïls portrait jeune.png
+ |Titre portrait 3=Portrait officiel
+ |Portrait caption 3=
 }}
 </pre>
 {{clr}}
+</div>
 == 🧩 Paramètres ==
 {| class="wikitable"
-! Paramètre !! Description !! Obligatoire
+! Nom du paramètre !! Description !! Obligatoire
+|-
+| <code>Portrait 1</code> || Nom du fichier de la première image sans le préfixe File: || Oui
+|-
+| <code>Titre portrait 1</code> || Titre affiché au-dessus de la première image || Non
 |-
-| <code>Portrait 1</code> || Nom du fichier image principal || Oui ✅
+| <code>Portrait 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>Portrait 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 portrait 2</code> || Titre affiché au-dessus de la deuxième image || Non
 |-
-| <code>Portrait 2</code> || Nom du second fichier image || Non
+| <code>Portrait 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>Portrait 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 portrait 3</code> || Titre affiché au-dessus de la troisième image || Non
+|-
+| <code>Portrait 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 portraits aient une taille cohérente et soient automatiquement rognés (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:{{{Portrait 1}}}|class=infobox-portrait-cropped]]
+</pre>
-.infobox-caption {
-  font-size: 90%;
-  font-style: italic;
-  margin-top: 0.3em;
-}
-</syntaxhighlight>
-----
-La documentation de ce modèle est incluse depuis sa sous-page de documentation. Pour plus d’informations, voir la [[Modèle:{{PAGENAME}}/Documentation|documentation du modèle]].
-== 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]]