FANDOM


90210-infobox-light

Un exemple d'infobox

Les infoboxes sont comme fiches d'informations ou des encadrés dans les articles de magazine ; conçus pour présenter un résumé du sujet de 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 la façon d'utiliser une infobox sur un article — bien au contraire, le changement ne porte que sur la façon de l'écrire sur la page de modèle. Fandom considère que l'utilisation des Infoboxes portables est standard pour leurs communautés, sûre et stable pour un usage pratique commun.

Un outil d'aide à la migration des infoboxes existantes a également été créé. Pour plus d'informations, voir Aide:Migration des infoboxes, et pour une présentation complète, étape par étape, voir Aide:Migration des infoboxes/Procédure.

Liens utiles
  • Pour une introduction de base à l'éditeur visuel des infoboxes, voir Aide:Infoboxes/modification
  • Pour une liste détaillées de toutes les options standards disponibles pour les infoboxes portables, incluant des exemples de wikitexte à utiliser et leur rendu HTML, consultez Aide:Infoboxes/Balises
  • Pour des informations détaillées sur la façon d'utiliser le CSS pour appliquer un style à l'infobox, incluant des procédures pas à pas, consultez Aide:Infoboxes/CSS
  • Pour des instructions pas à pas sur la façon de migrer une infobox classique vers une infobox portable, consultez Aide:Migration des infoboxes/Procédure
  • Portail Portabilité : Guides, exemples et assistance personnalisée pour la migration, la personnalisation et la thématisation de vos infoboxes

Comment ajouter une infobox dans un article

VE-portableinfobox

Insertion des Infoboxes portables depuis l'ÉditeurVisuel

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 l'ÉditeurVisuel, les Infoboxes portables peuvent être rapidement insérées via l'option Infobox du menu déroulant « Insérer ».

En revanche, en mode source, vous commencerez généralement par copier la syntaxe figurant dans la documentation du modèle (qui se trouve normalement en bas de la page du modèle) et la coller dans un article, en changeant les mots après les signes "égal" pour fournir l'information souhaitée. 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
}}

Avec les Infoboxes portables, cela fonctionne comme avec n'importe quel autre modèle. Cependant, le balisage de la page du modèle est un peu différent, comme indiqué ci-dessous.

Comment créer une infobox

ExempleInfobox

L'hiver vient…

Pour commencer, créez un nouveau modèle avec le nom que vous souhaitez. Pour ce faire, créez une nouvelle page avec comme nom Modèle:[nom de votre choix] (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 superposée 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''
}}

Masquer des valeurs

Tout champ ou élément sans valeur sera automatiquement masqué. Cela s'applique à toutes les balises, à l'exception des groupes qui sont affichés de force (voir #Forcer l'affichage de tous les éléments des groupes). Lorsque tous les éléments sont vides, l'infobox en elle-même n'apparaîtra pas. À l'intérieur d'une balise d'image, les images qui n'existent pas n'afficheront pas de « lien rouge » et la page du fichier n'apparaîtra pas dans Spécial:Fichiers_demandés.

Comment modifier l'apparence 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)
Les libellés sont affichés à gauche des valeurs
<infobox></infobox>
Screen Shot 2015-06-16 at 12.12.17

Infobox avec mise en page par défaut

Mise en page superposée
Les libellées sont affichés au-dessus des valeurs
<infobox layout="stacked"></infobox>
Screen Shot 2015-06-16 at 12.10.54

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 depuis le Concepteur de thème.

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

  • L'attribut type est utilisé pour définir le type logique de l'infobox
  • 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, incluant un guide détaillé, consultez Aide:Infoboxes/CSS, ou trouvez des exemples de styles et de thèmes sur le Portability Hub.

Couleurs accentuées

Les couleurs d'arrière-plan des titres et des en-têtes, et celles des textes peuvent être également redéfinies 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.

Cela inclut également un paramètre pour la couleur par défaut, donc l'utilisation de accent-color-default="#FFF" définit la couleur pour tous les titres et les fonds d'en-tête, et accent-color-text-default="#000000" fonctionne de manière similaire en définissant la couleur de texte par défaut en utilisant des formats hexadécimaux.

Style par élément

Les éléments individuels d'une infobox peuvent inclure des marqueurs dans les résultats HTML qui permettent de les indiquer avec des sélecteurs CSS connus sous le nom d'attributs de données.

  • Tous les éléments de l'Infobox portable qui ont une entrée source seront désormais rendus en HTML avec le nom de ce paramètre dans un attribut de données, tel que data-source="ATK". Cela vous permettra d'écrire des sélecteurs CSS ou jQuery tels que .pi-item[data-source=ATK] pour styliser et identifier les éléments individuels. Utilisé en combinaison avec type, cela devrait vous éviter de devoir sélectionner le style avec nth-of-type et vous ouvrir d'autres possibilités de conception et d'interactivité.
  • Le nouveau paramètre de nom permet la sélection explicite des éléments, qu'ils acceptent ou non une entrée source, y compris l'identification de <title>, <group>, <data>, <header>, <image> et <navigation>. Tout comme l'attribut de données data-source, <data name="bar"> peut être sélectionné avec .pi-item[data-item-name=bar].

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 une cheval
Eddard 2.jpg|Eddard dans une maison
Eddard 3.jpg|Eddard près d'un corbillard
</gallery>
}}

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

Pour ajouter une vidéo dans une infobox, utilisez simplement la balise <image>, comme vous le feriez pour une image. Lorsqu'une vidéo est insérée à la place d'une image, une vignette avec une icône de lecture et des informations sur la durée s'affichera dans l'infobox, et un clic sur la vidéo fera apparaître un lecteur vidéo. Si vous souhaitez ajouter plusieurs vidéos, ajoutez une nouvelle balise <image> pour chaque vidéo.

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 <image>. Comme vous pouvez le voir, le champ <title> n'a pas à être obligatoirement 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, l'ensemble de ce groupe 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.08

Groupement horizontal

Au lieu d'une liste verticale, les champs d'un <group> peuvent être disposés horizontalement, où tout le contenu est affiché côte à côte sur une seule ligne. 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 lignes fixes et structurées). 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="nom" />
  <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="resultat" layout="default"><label>Conséquences</label></data>
  </group>
</infobox>

Forcer l'affichage de tous les éléments des groupes

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>Dénouement</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="camp1" />
    <data source="camp2" />
  </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 = [[Fichier:Greyjoy|20px|link=Maison Greyjoy]] Maison Greyjoy
|combattants2 = [[Fichier:Baratheon|20px|link=Maison 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.

Panneaux

PortableInfobox-Panel-Orc

Les éléments et groupes de données peuvent désormais être structurés en panneaux à onglets, ce qui permet une plus grande souplesse et un affichage plus intelligent des données sur les écrans de bureau et les écrans mobiles. Chaque élément <panel> - en tant qu'enfant de l'élément racine <infobox> - peut être labélisé (avec <label>) et un ou plusieurs éléments <section> pour constituer un ensemble d'onglets. Tout élément qui pourrait autrement être un enfant de <infobox> peut être un enfant de <section>. Cela devrait réduire l'encombrement et la nécessité de groupes d'infoboxes sur les pages, tout en structurant les infoboxes de manière plus dynamique.

La balise <section> représente le contenu d'un onglet. Le basculement cliquable est représenté par une balise <label>. Par défaut, les libellés sont indexés numériquement à partir de zéro s'ils sont omis ; si tous les onglets d'un panneau ne sont pas labellisés, ils sont alors contenus dans l'infobox comme s'il s'agissait de groupes.

<infobox>
  <title source="titre">
    <default>{{PAGENAME}}</default>
  </title>
  <panel>
    <section>
      <label>5E</label>
      <data source="taille1">
        <label>Taille</label></data>
      <data source="type1">
        <label>Type</label></data>
    </section>
    <section>
      <label>4E</label>
      <data source="origine2">
        <label>Origine</label></data>
      <data source="type2">
        <label>Type</label></data>
      <group>
        <header>Détails</header>
        <data source="entrée2">
          <label>Entrée</label></data>
        <data source="sortie2">
          <label>Sortie</label></data>
      </group>
    </section>
  </panel>
</infobox>

Options avancées

Mise en forme

Si vous souhaitez ajouter des informations additionnelles à 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, la variable spécifiée dans source= est alors formatée/modifiée selon ce que contient la balise format. À cette fin, le paramètre doit être indiqué entre trois accolades ; par exemple, {{{prix}}} pour source="prix".
  • Si la variable indiquée dans source= est vide, le nœud affiche la valeur de la balise default (ou n'affiche rien si la balise default n'est pas spécifiée). Le contenu de default n'est jamais disponible pour les fonctions parser ; par exemple, le paramètre {{{{prix}}} resterait vide. On peut considérer qu'il signifie « format par défaut » et non « valeur par défaut ».

Quelques exemples de cas d'utilisation :

  • Ajout de texte supplémentaire : <format>{{{prix}}} €</format>
  • Liens vers une page : <format>[[{{{lieu}}}]]</format>
  • Lien vers une catégorie : <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>Prix à payer</header>
<data source="achatmarchandage">
  <label>Prix avec marchandage</label>
  <format>{{{prixm}}} {{icône monnaie}}</format>
</data>
<data source="achat">
  <label>Prix sans rabais</label>
  <format>{{{achat}}} {{icône monnaie}}</format>
</data>
<data source="vente">
  <label>Prix de vente</label>
  <format>{{{vente}}} {{icône monnaie}}</format>
</data>
<data source="poids">
  <label>Poids</label>
  <format>{{{poids}}} {{icône poids}}</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.

<data source="niveau">
  <label>Rang</label>
  <format>Orc {{#switch:{{{niveau}}}
              |1=ouvrier
              |2=soldat
              |#default=soldat
              }}
  </format>
<default>Orc</default>
</data>

Il ne serait pas logique de tester la chaîne vide dans l'instruction switch ; par exemple, |=(rang inconnu), car elle est déjà couverte par la balise default.

Exemples

Voir aussi

Plus d'aide

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA .