« Modèle:Infobox V3/Image/Documentation » : différence entre les versions
Apparence
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 | Ce modèle affiche jusqu’à trois images sous forme d’onglets grâce au système de navigation <code>tabber</code>. | ||
Il | 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 == | == 🔧 Syntaxe == | ||
< | Utilisation standard du modèle dans une infobox ou une page : | ||
{{ | <pre> | ||
| Image 1 = | {{NomDuModèle | ||
| Titre image 1 = | | Image 1 = NomImage1.jpg | ||
| Titre image 1 = Légende 1 | |||
| Image caption 1 = Description 1 | | Image caption 1 = Description 1 | ||
| Image 2 = | | Image 2 = NomImage2.jpg | ||
| Titre image 2 = | | Titre image 2 = Légende 2 | ||
| Image caption 2 = Description 2 | | Image caption 2 = Description 2 | ||
| Image 3 = | | Image 3 = NomImage3.jpg | ||
| Titre image 3 = | | Titre image 3 = Légende 3 | ||
| Image caption 3 = Description 3 | | Image caption 3 = Description 3 | ||
}} | }} | ||
</ | </pre> | ||
== 🧪 Exemples == | == 🧪 Exemples == | ||
=== | === Une seule image === | ||
<div> | |||
{{Infobox V3/Début Documentation}} | {{Infobox V3/Début Documentation}} | ||
{{Infobox V3/Portrait | {{Infobox V3/Portrait | ||
|Titre | |Titre image 1=Image officielle | ||
| | |Image 1=Image Blad Melkitim.png | ||
| | |Image caption 1= Blad Melkitim | ||
}} | }} | ||
{{Infobox V3/Fin Documentation}} | {{Infobox V3/Fin Documentation}} | ||
<pre> | <pre> | ||
{{Infobox V3/Image | {{Infobox V3/Portrait | ||
| Image 1 = | |Titre image 1=Image officielle | ||
| Titre image 1 = | |Image 1=Image Blad Melkitim.png | ||
| Image caption 1 = | |Image caption 1= | ||
| Image 2 = | }} | ||
| Titre image 2 = | </pre> | ||
| Image caption 2 = | {{clr}} | ||
| Image 3 = | </div> | ||
| Titre image 3 = | |||
| Image caption 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> | |||
=== | === Trois images === | ||
<div> | |||
{{Infobox V3/Début}} | {{Infobox V3/Début}} | ||
{{Infobox V3/ | {{Infobox V3/Portrait | ||
| Image 1 = | |Image 1=Ejheril Reïls image.png | ||
| Titre image 1 = | |Titre image 1=Image officielle | ||
| Image caption 1 = | |Image caption 1= | ||
| Image 2 = | |Image 2=Ejheril Reïls image jeune.png | ||
| Titre image 2 = | |Titre image 2=Image officielle | ||
| Image caption 2 | |Image caption 2= | ||
}} | }} | ||
{{Infobox V3/Fin}} | {{Infobox V3/Fin}} | ||
<pre> | <pre> | ||
{{Infobox V3/ | {{Infobox V3/Portrait | ||
| Image 1 = | |Image 1=Ejheril Reïls image.png | ||
| Titre image 1 = | |Titre image 1=Image officielle | ||
| Image caption 1 = | |Image caption 1= | ||
| Image 2 = | |Image 2=Ejheril Reïls image jeune.png | ||
| Titre image 2 = | |Titre image 2=Image officielle | ||
| Image caption 2 = | |Image caption 2= | ||
}} | }} | ||
</pre> | </pre> | ||
{{clr}} | {{clr}} | ||
</div> | |||
== 🧩 Paramètres == | == 🧩 Paramètres == | ||
{| class="wikitable" | {| class="wikitable" | ||
! | ! 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> | | <code>Image 2</code> || Nom du fichier de la deuxième image || Non | ||
|- | |- | ||
| <code>Titre | | <code>Titre image 2</code> || Titre affiché au-dessus de la deuxième image || Non | ||
|- | |- | ||
| <code> | | <code>Image caption 2</code> || Légende affichée sous la deuxième image || Non | ||
|- | |- | ||
| <code> | | <code>Image 3</code> || Nom du fichier de la troisième image || Non | ||
|- | |- | ||
| <code>Titre | | <code>Titre image 3</code> || Titre affiché au-dessus de la troisième image || Non | ||
|- | |- | ||
| <code> | | <code>Image caption 3</code> || 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é == | == 🧰 CSS recommandé == | ||
Pour que les images aient une taille cohérente et soient automatiquement rognées (crop), ajoute ce code dans `MediaWiki:Common.css` : | |||
<pre> | |||
< | .infobox-portrait-cropped img { | ||
.infobox- | width: 100%; | ||
height: 300px; | |||
object-fit: cover; | |||
object-position: center; | |||
} | } | ||
</pre> | |||
Et appelle les images dans le modèle comme ceci : | |||
<pre> | |||
[[File:{{{Image 1}}}|class=infobox-portrait-cropped]] | |||
</pre> | |||
< | |||
[[ | == 🔗 Voir aussi == | ||
[[ | * [[Modèle:Infobox]] | ||
[[ | * [[Aide:Images]] | ||
* [[MediaWiki:Common.css]] | |||
Version du 28 mai 2025 à 20:48
📘 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]]