Centre des communautés
S'inscrire
Advertisement
Centre des communautés
90210-infobox-light

Un exemple d'infobox

Les infoboxes sont comme les points clés dans les articles de magazine, conçus pour présenter un résumé de ce dont traite la page. Elles présentent des éléments importants dans un format organisé et rapide à lire. Les infoboxes sont généralement réalisées en utilisant des modèles, pour assurer l'homogénéité sur une communauté.

FANDOM a développé une nouvelle façon de concevoir les infoboxes, appelée infoboxes portables comme elles peuvent s'afficher correctement sur différents appareils, que cette page détaille. Il n'y a aucun changement sur comment utiliser une infobox sur un article, le changement ne porte que sur la façon de l'écrire sur la page de modèle.

Liens utiles
  • Pour une liste détaillées de toutes les options standards disponibles pour les infoboxes portables, inclus des exemples de wikitexte à utiliser et leur rendu HTML, consultez Aide:Infoboxes/wikitexte.
  • Pour des informations détaillées sur comment utiliser le CSS pour appliquer un style à l'infobox, inclus des procédures pas à pas, consultez Aide:Infoboxes/CSS.
  • Pour des instructions sur comment migrer d'une infobox classique vers une infobox portable, consultez Aide:Migration des infoboxes
  • Pour un guide d'utilisation de la fonctionnalité d'aperçu d'infobox, consultez Aide:Aperçu d'infobox

Comment utiliser une infobox

Vous pouvez ajouter une infobox sur un article de la même façon que n'importe quel autre modèle, soit via l'outil de modèle intégré à l'éditeur soit par le mode source de l'éditeur. Dans le dernier cas, vous commenceriez en général par copier la syntaxe depuis la documentation du média (qui se trouve souvent en bas de la page du modèle) et la coller dans un article, en modifiant ce qui trouve après les signes égal pour indiquer les informations souhaitées. Par exemple :

{{infobox personnage
| titre       = Daisy
| image       = Example.jpg
| légende     = Daisy, au vent
| position    = Fleur suprême
| age         = 2 mois
| statut      = Active
| hauteur     = 12 centimètres
| poids       = 20 grammes
}}

Comment créer une infobox

ExempleInfobox

L'hiver vient...

Premièrement, créez un nouveau modèle avec le nom que vous voulez, par exemple Modèle:ExempleInfobox. Alors qu'auparavant nous aurions utilisé des tableaux (table) et des divs, vous pouvez maintenant utiliser des balises d'infobox. Nous commencerons avec une infobox basique, avec un titre et une image :

<infobox layout="stacked">
 <title source="nom"><default>{{PAGENAME}}</default></title>
 <image source="image" />
</infobox>

Ce wikitexte indiquera à votre modèle d'utiliser les variables nom et image pour les éléments titre (title) et image. De plus, vous pouvez fournir la balise default, dont la valeur sera utilisée quand un utilisateur ne donne pas la valeur pour une variable sur l'article.

Nous avons maintenant besoin de deux champs en plus contenant des informations supplémentaires, ajoutons-en un :

<data source="saison"><label>Saison(s)</label></data>

Après avoir ajouté le dernier champ avec pour source première et l'intitulé Première apparition, on arrive au code suivant :

<infobox layout="stacked">
 <title source="nom"><default>{{PAGENAME}}</default></title>
 <image source="image" />
 <data source="saison"><label>Saison(s)</label></data>
 <data source="première"><label>Première apparition</label></data>
</infobox>

Nous pouvons maintenant utiliser le modèle dans un article, définir les paramètres suivants et obtenir une infobox fonctionnelle :

{{ExempleInfobox
|nom      = Eddard Stark
|image    = EddardStark.jpg
|saison   = 1
|première = ''Winter is Coming''
}}

Comment modifier l'affichage de l'infobox

Les infoboxes utilisant ce type de code ont un style automatique, basé sur le thème de la communauté. Si une variable est vide, la ligne correspondante du modèle ne sera pas affichée (à moins que la balise default ait été utilisée).

 

Options de mise en page

Deux options de mises en pages alternatives sont disponibles pour les infoboxes :

Mise en page par défaut (tabulaire) Mise en page superposée
Les libellés sont affichés à gauche des valeurs Les libellées sont affichés au-dessus des valeurs
<infobox>
   ...
</infobox>
<infobox layout="stacked">
   ...
</infobox>
Screen Shot 2015-06-16 at 12.12

Infobox avec mise en page par défaut

Screen Shot 2015-06-16 at 12.10

Infobox avec mise en page superposée

Thème personnalisé

Le thème par défaut de l'infobox peut être modifié de deux façons. Il y a une option sur la page Special:WikiFeatures de votre communauté, appelée Thème d'infobox Europa. Quand vous l'activez, vos infoboxes afficheront les couleurs que vous avez choisies pour la navigation du wiki.

Une autre façon est d'utiliser le CSS de la communauté locale et en utilisant les attributs theme ou theme-source de la balise infobox, facilitant son application à des modèles d'infobox spécifiques en utilisant des classes.

  • L'attribut theme est utilisé pour indiquer une classe CSS personnalisée pour l'infobox.
  • L'attribut theme-source vous permet de changer la classe CSS via un paramètre de modèle.

Pour plus d'informations sur comment utiliser ces attributs et appliquer un thème à l'infobox, inclus un guide détaillé, consultez Aide:Infoboxes/CSS.

Couleurs accentuées

La couleur des fonds et du texte du titre et des entêtes peuvent être également modifiés pour chaque infobox en utilisant la fonctionnalité des couleurs accentuées. Comme theme-source, la couleur utilisée est la valeur donnée dans le paramètre du modèle indiqué dans accent-color-source (pour les fonds) et accent-color-text-source (pour le texte).

Par exemple, si le modèle d'infobox déclare accent-color-source="bkg" et que l'article utilisant cette infobox déclare bkg = #FFF, la couleur du fond des entêtes et des titres sera #FFF (la valeur HEX pour la couleur blanche). Les couleurs déclarées de cette façon doivent être sous la forme HEX #FFF ou #FFFFFF, ou la recoloration ne fonctionnera pas correctement.

Les couleurs accentuées seront prises en compte prioritairement par rapport aux couleurs déclarées dans les thèmes, utilisées par défaut.

Comment utiliser plusieurs images ou vidéos

Infoboxtabs

Images dans des onglets

Pour utiliser plusieurs images au même endroit dans une infobox, vous pouvez simplement utiliser une balise gallery comme paramètre.

{{Exemple
|nom   = Eddard Stark
|image = <gallery>
Eddard 1.jpg|Eddard sur son cheval
Eddard 2.jpg|Eddard chez lui
Eddard 3.jpg|Eddard près d'un corbillard
</gallery>
}}

Pour voir les discussions sur cette fonctionnalité, consultez ce fil.

Comment grouper des données

InfoboxAvancée

Groupes et ordres inhabituels en action

Maintenant que vous avez créé une infobox simple, vous pouvez apprendre comment utiliser des options plus avancées. Dans la partie ci-dessous, nous vous montrons comment construire l'infobox que vous voyez à droite.

Cette infobox commence avec trois champs de données (data), puis un champ titre (title) et un champ image. Comme vous pouvez le voir, le champ titre n'a pas besoin d'être le premier.

<infobox layout="stacked">
 <data source="précédente"><label>Précédente</label></data>
 <data source="même"><label>En même temps</label></data>
 <data source="suivante"><label>Suivante</label></data>
 <title source="nom" />
 <image source="image" />
</infobox>

Grouper des informations

La balise group vous permet de grouper des champs ensembles et leur donner un en-tête. Rappelez-vous : les champs déclarés mais qui n'ont pas de valeur n'apparaîtront pas. Cette règle s'applique aussi aux groupes : si aucun des champs (autre que la balise header) d'un groupe n'a de valeur, ce groupe entier ne s'affichera pas.

<infobox layout="stacked">
 <data source="précédente"><label>Précédente</label></data>
 <data source="même"><label>En même temps</label></data>
 <data source="suivante"><label>Suivante</label></data>
 <title source="nom" />
 <image source="image" />
 <group>
  <header>Détails</header>
  <data source="conflit"><label>Conflit</label></data>
  <data source="date"><label>Date</label></data>
  <data source="lieu"><label>Lieu</label></data>
  <data source="résultat"><label>Conséquences</label></data>
 </group>
</infobox>

Affichage horizontal des groupes

Screen Shot 2015-06-16 at 13.27

Groupement horizontal

Au lieu d'une liste vertical, les groupes peuvent être affichés plutôt horizontalement, où tout le contenu est affiché côte à côte sur une seule ligne horizontale. Cela peut être obtenu en ajoutant l'attribut layout="horizontal" à la balise group.

<group layout="horizontal">
   ...
</group>

Affichage « intelligent » des groupes

L'affichage « intelligent » est similaire aux groupes horizontaux (qui forcent l'affichage sous forme de ligne fixe, structurée). Il permet à plusieurs champs de données d'un groupe de partager la même ligne. Quand le nombre de champs atteint une limite donnée, le prochain champ de données apparaîtra sur une nouvelle ligne. Les éléments d'une ligne s'ajusteront pour remplir toute la largeur disponible.

Pour utiliser les groupes intelligents, ajoutez row-items="3" (ou tout autre nombre définissant la limite). Tous les éléments d'un groupe intelligent utilisent l'affichage horizontal par défaut, il n'est donc pas nécessaire d'ajouter cet attribut si vous utilisez les groupes intelligents. Toutefois, il est possible de mélanger les champs de données verticaux et horizontaux d'un groupe intelligent en ajoutant l'attribut layout="default" à une balise <data> seule.

Pour qu'un champ de données spécifique prenne plus d'un seul espace, appliquez l'attribut span="2" à sa balise <data>.

<infobox>
  <title source="non" />
  <image source="image" />
  <group row-items="3">
    <header>Détails</header>
    <data source="conflit"><label>Conflit</label></data>
    <data source="date"><label>Date</label></data>
    <data source="lieu"><label>Lieu</label></data>
    <data source="result" layout="default"><label>Outcome</label></data>
  </group>
</infobox>
 

Forcer tous les éléments du groupe à s'afficher

En utilisant show="incomplete", vous pouvez forcer tous les éléments du groupe à s'afficher, même quand ils sont vides, à moins qu'ils ne soient tous vides, alors le groupe n'est pas affiché du tout.

<group layout="horizontal" show="incomplete">
 <header>Combattants</header>
 <data source="partie1" />
 <data source="partie2" />
</group>

Maintenant, en mettant tout ensemble, on arrive au code de modèle final suivant :

<infobox layout="stacked">
 <data source="précédente"><label>Précédente</label></data>
 <data source="même"><label>En même temps</label></data>
 <data source="suivante"><label>Suivante</label></data>
 <title source="nom" />
 <image source="image" />
 <group>
  <header>Détails</header>
  <data source="conflit"><label>Conflit</label></data>
  <data source="date"><label>Date</label></data>
  <data source="lieu"><label>Lieu</label></data>
  <data source="résultat"><label>Conséquences</label></data>
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Combattants</header>
  <data source="combattants1" />
  <data source="combattants2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Commandants</header>
  <data source="commandants1" />
  <data source="commandants2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Forces</header>
  <data source="forces1" />
  <data source="forces2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Victimes</header>
  <data source="victimes1" />
  <data source="victimes2" />
 </group>
 <data source="civils"><label>Pertes civiles</label></data>
</infobox>

Nous pouvons maintenant l'utiliser dans un article :

{{InfoboxAvancée
|précédente   = Bataille des Îles de Fer
|même         = Siège du Vieux Wyk
|suivante     = Siège de Pyke
|nom          = Siège de Grand Wyk
|image        = Stannis Great Wyk.png
|conflit      = Rébellion Greyjoy
|date         = 289 AL
|lieu         = Grand Wyk, Îles de Fer
|résultat     = Victoire du Trône de fer
|combattants1 = [[File:Greyjoy|20px|link=House Greyjoy]] Maison Greyjoy
|combattants2 = [[File:Baratheon|20px|link=House Baratheon]] Trône de fer
|commandants1 = Inconnus
|commandants2 = Lord Stannis Baratheon
|victimes1    = Inconnues
|victimes2    = Inconnues
}}

Groupes déroulants

PI-Collapse

Groupes déroulants en action

Les groupes peuvent être rendus déroulant en ajoutant soit collapse="open" soit collapse="closed" à la balise group. Cela rendra l'en-tête du groupe cliquable (pour dérouler et enrouler le groupe) et le groupe s'affichera au départ respectivement déroulé ou enroulé respectivement.

<group collapse="closed">
<header>Apparitions</header>
<data source="films" />
<data source="comics" />
</group>

Note : une ligne d'en-tête contenant quelque chose doit suivre immédiatement la balise group pour que ça fonctionne.

Options avancées

Si vous souhaitez ajouter des informations additionnelles avant ou après vos données, comme ajouter des icônes ou des catégories, ou pour traiter les valeurs indiquées, le formatage des champs vous permet de le faire.

  • Quand la balise format est indiquée pour un nœud, la variable spécifiée dans source= est alors formatée/modifiée selon ce que contient la balise format.
  • Si la variable indiquée dans source= est vide, le nœud affiche les valeurs des balises default (ou n'affiche rien si les balises default ne sont pas spécifiées).

Quelques exemples de cas d'utilisation :

  • Texte supplémentaire – <format>{{{prix}}} €</format>
  • Liens – <format>[[{{{lieu}}}]]</format>
  • Catégories – <format>[[Catégorie:{{{type voiture}}}]]</format>

Par exemple, nous pouvons insérer un modèle {{icône monnaie}} :

<data source="prix">
 <label>Prix</label>
 <format>{{{prix}}} {{icône monnaie}}</format>
</data>

L'effet affiché à droite peut être obtenu avec la syntaxe suivante :

Field mutators

Champs avec formatage

<header>Price to buy</header>
<data source="buyhaggle">
 <label>Price with Haggling</label>
 <format>{{{buyh}}} {{money icon}}</format>
</data>
<data source="buy">
 <label>Undiscounted price</label>
 <format>{{{buy}}} {{money icon}}</format>
</data>
<data source="sell">
 <label>Price to sell</label>
 <format>{{{sell}}} {{money icon}}</format>
</data>
<data source="weight">
 <label>Weight</label>
 <format>{{{weight}}} {{weight icon}}</format>
</data>

Fonctions parseur

Les fonctions parseur peuvent être ajoutées à n'importe quelle infobox. Toutefois, les résultats seront automatiquement masqués si la source du paramètre, de la balise ou de la donnée ne contient aucun texte.

Code du modèle Rendu
<data source="niveau">
<label>Rang</label>
<default>Orque {{#switch:{{{niveau}}}|1=ouvrier|2=soldat|#default=guerrier}}</default>
</data>

Exemples

Voir aussi

Plus d'aide

Advertisement