Aller au contenu

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

De Wikiquestia
Aucun résumé des modifications
Ligne 3 : Ligne 3 :


== 📘 Description ==
== 📘 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 `tabber`.   
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 ==
== 🔧 Syntaxe ==
<syntaxhighlight lang="text">
Utilisation standard du modèle dans une infobox ou une page :
{{Infobox V3/Portrait
<pre>
  |Portrait 1=
{{NomDuModèle
  |Titre portrait 1=
  | Portrait 1 = NomImage1.jpg
  |Portrait caption 1=
  | Titre portrait 1 = Légende 1
  |Portrait 2=
  | Portrait caption 1 = Description 1
  |Titre portrait 2=
  | Portrait 2 = NomImage2.jpg
  |Portrait caption 2=
  | Titre portrait 2 = Légende 2
  |Portrait 3=
  | Portrait caption 2 = Description 2
  |Titre portrait 3=
  | Portrait 3 = NomImage3.jpg
  |Portrait caption 3=
  | Titre portrait 3 = Légende 3
  | Portrait caption 3 = Description 3
}}
}}
</syntaxhighlight>
</pre>


== 🧪 Exemples ==
== 🧪 Exemples ==
Ligne 100 : Ligne 101 :


== 🧩 Paramètres ==
== 🧩 Paramètres ==
{| class="wikitable"
;Portrait 1, 2, 3 : 
! Paramètre !! Description !! Obligatoire
: Nom du fichier de l’image sans préfixe `File:` ou `Fichier:`.
|-
| <code>Portrait 1</code> || Nom du fichier image principal || Oui ✅
|-
| <code>Titre portrait 1</code> || Titre au-dessus de la première image || Non
|-
| <code>Portrait caption 1</code> || Légende sous la première image || Non
|-
| <code>Portrait 2</code> || Nom du second fichier image || Non
|-
| <code>Titre portrait 2</code> || Titre au-dessus de la deuxième image || Non
|-
| <code>Portrait caption 2</code> || Légende sous la deuxième image || Non
|}


== Comportement ==
;Titre portrait 1, 2, 3 : 
* Si <code>Portrait 2</code> est fourni, les deux portraits sont affichés dans des onglets <code><tabber></code>.
: Titre affiché au-dessus de chaque image.
* 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é ==
;Portrait caption 1, 2, 3 : 
: Description courte affichée sous chaque image.


Ajoute ces règles à ta page <code>MediaWiki:Common.css</code> si ce n’est pas encore fait :
⚠️ Les images 2 et 3 sont facultatives. Si seule l’image 1 est renseignée, elle s’affiche seule, sans onglets.
<syntaxhighlight lang="css">
.infobox-center {
  text-align: center;
  margin: 0 auto;
}


.infobox-LO {
== 🧰 CSS recommandé ==
  padding: 0.5em;
Pour que les portraits aient une taille cohérente et soient automatiquement rognés (crop), ajoute ce code dans `MediaWiki:Common.css` :
<pre>
.infobox-portrait-cropped img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}
}
</pre>


.infobox-caption {
Et appelle les images dans le modèle comme ceci :
  font-size: 90%;
<pre>
  font-style: italic;
[[File:{{{Portrait 1}}}|class=infobox-portrait-cropped]]
  margin-top: 0.3em;
</pre>
}
</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]]
* [[Modèle:Infobox]]
[[Catégorie:Modèle avec image]]
* [[Aide:Images]]
* [[MediaWiki:Common.css]]

Version du 28 mai 2025 à 20:38

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

📘 Description

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

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

Un seul portrait

Portrait officiel

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

Deux portraits

Infobox V3/Portrait/Documentation

Portrait officiel

Portrait officiel

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

Infobox V3/Portrait/Documentation

Portrait officiel

Portrait officiel

{{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=
}}

🧩 Paramètres

Portrait 1, 2, 3
Nom du fichier de l’image sans préfixe `File:` ou `Fichier:`.
Titre portrait 1, 2, 3
Titre affiché au-dessus de chaque image.
Portrait caption 1, 2, 3
Description courte affichée sous chaque image.

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

🧰 CSS recommandé

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