Aller au contenu

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

De Wikiquestia
Aucun résumé des modifications
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>
{{Sous-page de documentation}}</noinclude>


== 📘 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 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 ==
== 🔧 Syntaxe ==
<syntaxhighlight lang="text">
Utilisation standard du modèle dans une infobox ou une page :
{{Infobox V3/Image
<pre>
  | Image 1 = Image1.jpg
{{NomDuModèle
  | Titre image 1 = Première image
  | Image 1 = NomImage1.jpg
  | Titre image 1 = Légende 1
  | Image caption 1 = Description 1
  | Image caption 1 = Description 1
  | Image 2 = Image2.jpg
  | Image 2 = NomImage2.jpg
  | Titre image 2 = Deuxième image
  | Titre image 2 = Légende 2
  | Image caption 2 = Description 2
  | Image caption 2 = Description 2
  | Image 3 = Image3.jpg
  | Image 3 = NomImage3.jpg
  | Titre image 3 = Troisième image
  | Titre image 3 = Légende 3
  | Image caption 3 = Description 3
  | Image caption 3 = Description 3
}}
}}
</syntaxhighlight>
</pre>


== 🧪 Exemples ==
== 🧪 Exemples ==
=== Un seul portrait ===
=== Une seule image ===
<div>
{{Infobox V3/Début Documentation}}
{{Infobox V3/Début Documentation}}
{{Infobox V3/Portrait
{{Infobox V3/Portrait
  |Titre portrait 1=Portrait officiel
  |Titre image 1=Image officielle
  |Portrait 1=Portrait Blad Melkitim.png
  |Image 1=Image Blad Melkitim.png
  |Portrait caption 1= Blad Melkitim
  |Image caption 1= Blad Melkitim
}}
}}
{{Infobox V3/Fin Documentation}}
{{Infobox V3/Fin Documentation}}
<pre>
<pre>
{{Infobox V3/Image
{{Infobox V3/Portrait
  | Image 1 = Image1.jpg
|Titre image 1=Image officielle
  | Titre image 1 = Première image
  |Image 1=Image Blad Melkitim.png
  | Image caption 1 = Description 1
|Image caption 1=
  | Image 2 = Image2.jpg
}}
  | Titre image 2 = Deuxième image
</pre>
  | Image caption 2 = Description 2
{{clr}}
  | Image 3 = Image3.jpg
</div>
  | Titre image 3 = Troisième image
 
  | Image caption 3 = Description 3
=== Deux images ===
<div>
{{Infobox V3/Début}}
{{Infobox V3/Portrait
|Image 1=Ejheril Reïls image.png
  |Titre image 1=Image officielle
|Image caption 1=
|Image 2=Ejheril Reïls image jeune.png
|Titre image 2=Image officielle
|Image caption 2=
|Image 3=
|Titre image 3=
  |Image caption 3=
}}
{{Infobox V3/Fin}}
<pre>
{{Infobox V3/Portrait
|Image 1=Ejheril Reïls image.png
|Titre image 1=Image officielle
|Image caption 1=
  |Image 2=Ejheril Reïls image jeune.png
  |Titre image 2=Image officielle
  |Image caption 2=
  |Image 3=
  |Titre image 3=
  |Image caption 3=
}}
}}
</pre>
</pre>
{{clr}}
{{clr}}
</div>


=== Deux portraits ===
=== Trois images ===
<div>
{{Infobox V3/Début}}
{{Infobox V3/Début}}
{{Infobox V3/Image
{{Infobox V3/Portrait
  | Image 1 = Image1.jpg
  |Image 1=Ejheril Reïls image.png
  | Titre image 1 = Première image
  |Titre image 1=Image officielle
  | Image caption 1 = Description 1
  |Image caption 1=
  | Image 2 = Image1.jpg
  |Image 2=Ejheril Reïls image jeune.png
  | Titre image 2 =  
  |Titre image 2=Image officielle
  | Image caption 2 =
  |Image caption 2=
| Image 3 = Image1.jpg
| Titre image 3 =
| Image caption 3 =
}}
}}
{{Infobox V3/Fin}}
{{Infobox V3/Fin}}
<pre>
<pre>
{{Infobox V3/Image
{{Infobox V3/Portrait
  | Image 1 = Image1.jpg
  |Image 1=Ejheril Reïls image.png
  | Titre image 1 = Première image
  |Titre image 1=Image officielle
  | Image caption 1 = Description 1
  |Image caption 1=
  | Image 2 = Image2.jpg
  |Image 2=Ejheril Reïls image jeune.png
  | Titre image 2 = Deuxième image
  |Titre image 2=Image officielle
  | Image caption 2 = Description 2
  |Image caption 2=
| Image 3 = Image3.jpg
| Titre image 3 = Troisième image
| Image caption 3 = Description 3
}}
}}
</pre>
</pre>
{{clr}}
{{clr}}
</div>


== 🧩 Paramètres ==
== 🧩 Paramètres ==
{| class="wikitable"
{| 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>Image caption 1</code> || Légende affichée sous la première image || Non
|-
|-
| <code>Portrait 1</code> || Nom du fichier image principal || Oui ✅
| <code>Image 2</code> || Nom du fichier de la deuxième image || Non
|-
|-
| <code>Titre portrait 1</code> || Titre au-dessus de la première image || Non
| <code>Titre image 2</code> || Titre affiché au-dessus de la deuxième image || Non
|-
|-
| <code>Portrait caption 1</code> || Légende sous la première image || Non
| <code>Image caption 2</code> || Légende affichée sous la deuxième image || Non
|-
|-
| <code>Portrait 2</code> || Nom du second fichier image || Non
| <code>Image 3</code> || Nom du fichier de la troisième image || Non
|-
|-
| <code>Titre portrait 2</code> || Titre au-dessus de la deuxième image || Non
| <code>Titre image 3</code> || Titre affiché au-dessus de la troisième image || Non
|-
|-
| <code>Portrait caption 2</code> || Légende sous la deuxiè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é ==
== 🧰 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]]
* [[Modèle:Infobox]]
[[Catégorie:Modèle avec image]]
* [[Aide:Images]]
* [[MediaWiki:Common.css]]

Version du 28 mai 2025 à 20:48

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

📘 Description

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

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

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

🧪 Exemples

Une seule image

{{Infobox V3/Portrait
 |Titre image 1=Image officielle
 |Image 1=Image Blad Melkitim.png
 |Image caption 1=
}}

Deux images

Infobox V3/Image/Documentation
{{Infobox V3/Portrait
 |Image 1=Ejheril Reïls image.png
 |Titre image 1=Image officielle
 |Image caption 1=
 |Image 2=Ejheril Reïls image jeune.png
 |Titre image 2=Image officielle
 |Image caption 2=
 |Image 3=
 |Titre image 3=
 |Image caption 3=
}}

Trois images

Infobox V3/Image/Documentation
{{Infobox V3/Portrait
 |Image 1=Ejheril Reïls image.png
 |Titre image 1=Image officielle
 |Image caption 1=
 |Image 2=Ejheril Reïls image jeune.png
 |Titre image 2=Image officielle
 |Image caption 2=
}}

🧩 Paramètres

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é

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