Centre des communautés
S'inscrire
Advertisement
Centre des communautés
Cette fonctionnalité est activée par défaut sur Fandom.

Les infoboxes sont comme fiches d'informations ou des encadrés dans les articles de magazine ; elles sont conçues 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é.

90210-infobox-light

Un exemple d'infobox

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.

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
  • 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 de manière similaire que n'importe quel autre modèle. Le balisage de page de modèle est un peu différent, comme indiqué ci-dessous.

Comment créer une infobox[]

Portable infobox stacked layout

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 <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 title (titre) 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="paramètre-1">
  <label>Libellé 1</label>
</data>

Après avoir ajouté le dernier champ avec pour source paramètre-2 et l'intitulé Libellé 2, on arrive au code suivant :

<infobox layout="stacked">
  <title source="nom">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="image" />
  <data source="paramètre-1">
    <label>Libellé 1</label>
  </data>
  <data source="paramètre-2">
    <label>Libellé 2</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         = Lorem Ipsum
|image       = Example.jpg
|paramètre-1 = [[Lien|Texte 1]]
|paramètre-2 = ''[[Texte 2]]''
}}

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) et les champs avec une balise <default>. Lorsque tous les éléments sont vides, l'infobox en elle-même n'apparaîtra pas. À l'intérieur d'une balise <image>, les images qui n'existent pas n'afficheront pas de « lien rouge », mais la page du fichier apparaîtra 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>
Portable infobox default layout
Mise en page superposée
Les libellées sont affichés au-dessus des valeurs
<infobox layout="stacked">
   </infobox>
Portable infobox stacked layout

Thème personnalisé[]

Il existe plusieurs façons de personnaliser l'apparence de vos infoboxes. Il est recommandé de ne pas trop les mélanger, car cela pourrait être source de confusion pour les autres utilisateurs qui essaieraient de comprendre comment les styles sont appliqués.

  1. Le schéma de couleurs par défaut des infoboxs dépend des choix de couleurs effectués dans le Concepteur de thème ; la couleur d'arrière-plan sera globalement la même que la « Couleur d'arrière-plan de l'article », le titre et les entêtes auront la « Couleur d'accentuation » comme couleur de fond, et la bordure sera une version semi-opaque de la couleur d'accentuation. (Il existe d'autres dépendances, mais elles dépassent le cadre de cette page d'aide. Voir le guide de conversion pour FandomDesktop pour plus de détails.)
  2. Un contrôle total du thème des infoboxes nécessitera de modifier le CSS local de la communauté. La classe portable-infobox peut être utilisée pour cibler toutes les infobox du wiki, et l'utilisation des attributs type, theme, ou theme-source sur une balise infobox ajoutera des classes qui faciliteront le thématisation de modèles infobox spécifiques. (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.).
    • L'attribut type est utilisé pour définir le type logique de l'infobox (comme « personnage » ou « objet »). Toutes les infoboxes ayant le même type auront la même classe CSS.
    • L'attribut theme est utilisé pour grouper les infoboxes par un thème (comme « saison 1 » ou « Halloween »). Toutes les infoboxes ayant le même type auront la même classe CSS.
    • L'attribut theme-source vous permet de changer le thème de l'infobox en fonction d'un paramètre de modèle. Supposons que vous ayez des créatures issues des éléments de la Grèce antique. Le thème de l'infobox peut être modifié selon que l'utilisateur définit le paramètre élément sur Air, Terre, Feu ou Eau, par exemple.
  3. Les couleurs de texte et d'arrière-plan des en-têtes peuvent être définies pour chaque instance d'une infobox à l'aide de la méthode décrite dans la section Couleurs accentuées ci-dessous. Cette méthode produit un CSS en ligne qui remplace toutes les autres méthodes mais se limite au titre et aux en-têtes.

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.

Des couleurs par défaut peuvent également être spécifiées au cas où l'utilisateur ne donnerait pas de valeur au paramètre bkg dans l'exemple ci-dessus. 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 à noire.

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 nouvel attribut name 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> au paramètre de l'image.

{{Exemple
|nom   = Lorem Ipsum
|image = <gallery>
Example 1.jpg|Onglet 1
Example 2.jpg|Onglet 2
Example 3.jpg|Onglet 3
</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[]

Advancedinfobox-part1

Démo d'ordre inhabituel

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="paramètre-1">
    <label>Libellé 1</label>
  </data>
  <data source="paramètre-2">
    <label>Libellé 2</label>
  </data>
  <data source="paramètre-3">
    <label>Libellé 3</label>
  </data>
  <title source="nom" />
  <image source="image" />
</infobox>

Grouper des informations dans les balises de groupe[]

Advancedinfobox-part2

Ajout d'un groupe

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="paramètre-1">
    <label>Libellé 1</label>
  </data>
  <data source="paramètre-2">
    <label>Libellé 2</label>
  </data>
  <data source="paramètre-3">
    <label>Libellé 3</label>
  </data>
  <title source="nom" />
  <image source="image" />
  <group>
    <header>En-tête 1</header>
    <data source="paramètre-4">
      <label>Libellé 4</label>
    </data>
    <data source="paramètre-5">
      <label>Libellé 5</label>
    </data>
    <data source="paramètre-6">
      <label>Libellé 6</label>
    </data>
    <data source="paramètre-7">
      <label>Libellé 7</label>
    </data>
  </group>
</infobox>

Affichage horizontal des groupes[]

Groupement horizontal

Au lieu d'une liste verticale, les champs groupés 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 revenir à un format vertical.

Pour qu'un champ de données spécifique prenne plus d'un seul espace, appliquez l'attribut span="2" à sa balise <data>, de manière similaire au fonctionnement de l'attribut colspan dans les colonnes de tableau HTML.

<infobox>
  <title source="nom" />
  <image source="image" />
  <group row-items="3">
    <header>En-tête 2</header>
    <data source="paramètre-4">
      <label>Libellé 4</label>
    </data>
    <data source="paramètre-5">
      <label>Libellé 5</label>
    </data>
    <data source="paramètre-6">
      <label>Libellé 6</label>
    </data>
    <data source="paramètre-7" layout="default">
      <label>Libellé 7</label>
    </data>
  </group>
</infobox>

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

En définissant l'attribut 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>En-tête 3</header>
  <data source="paramètre-8" />
  <data source="paramètre-9" />
</group>

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

Advancedinfobox

L'infobox complète

<infobox layout="stacked">
  <data source="paramètre-1">
    <label>Libellé 1</label>
  </data>
  <data source="paramètre-2">
    <label>Libellé 2</label>
  </data>
  <data source="paramètre-3">
    <label>Libellé 3</label>
  </data>
  <title source="nom" />
  <image source="image" />
  <group row-items="3">
    <header>En-tête 2</header>
    <data source="paramètre-4">
      <label>Libellé 4</label>
    </data>
    <data source="paramètre-5">
      <label>Libellé 5</label>
    </data>
    <data source="paramètre-6">
      <label>Libellé 1</label>
    </data>
    <data source="paramètre-7" layout="default">
      <label>Libellé 7</label>
    </data>
  </group>
  <group layout="horizontal" show="incomplete">
    <header>En-tête 3</header>
    <data source="paramètre-8" />
    <data source="paramètre-9" />
  </group>
</infobox>

Nous pouvons maintenant l'utiliser dans un article :

{{Bataille
|paramètre-1 = [[Texte 1]]
|paramètre-2 = [[Texte 2]]
|paramètre-3 = [[Texte 3]]
|nom         = Lorem Ipsum
|image       = Example.jpg
|paramètre-4 = [[Texte 4]]
|paramètre-5 = [[Texte 5]]
|paramètre-6 = [[Texte 6]]
|paramètre-7 = [[Texte 7]]
|paramètre-8 = [[Texte 8]]
|paramètre-9 = [[Texte 9]]
}}

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>En-tête 2</header>
  <data source="paramètre-3" />
  <data source="paramètre-4" />
</group>

Note : une balise <header> contenant quelque chose doit suivre immédiatement la balise <group> pour que ça fonctionne.

Panneaux[]

Portable infobox panel

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> (à l'exception d'un autre panneau – les panneaux imbriqués ne sont pas pris en charge). 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 zone modifiable est formée de deux balises : la <section> représente le contenu d'un onglet. À l'intérieur, la balise <label> indique le texte à mettre sur le bouton cliquable. Par défaut, les libellés sont indexés numériquement à partir de zéro s'ils sont omis ; mais 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>Panneau 1</label>
      <data source="parameter-1">
        <label>Label 1</label></data>
      <data source="parameter-2">
        <label>Label 2</label></data>
    </section>
    <section>
      <label>Panneau 2</label>
      <data source="parameter-3">
        <label>Label 3</label></data>
      <data source="parameter-4">
        <label>Label 4</label></data>
      <group>
        <header>En-tête</header>
        <data source="parameter-5">
          <label>Label 5</label></data>
        <data source="parameter-6">
          <label>Label 6</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 utilisée, la variable spécifiée dans l'attribut source de la balise <data> peut être formatée/modifiée avec du wikitexte. À cette fin, la valeur du paramètre est accessible en l'entourant de trois paires d'accolades ; par exemple, {{{prix}}} pour source="prix", comme dans n'importe quel modèle.
  • Si la variable indiquée dans source= est vide, le champ n'est pas affiché à moins qu'une valeur est indiquée dans la balise <default>.

Quelques exemples de cas d'utilisation :

  • Ajout de texte supplémentaire : <format>{{{prix}}} €</format>
  • Indiquer une valeur par défaut : <format>${{{prix}}}</format><default>Not for sale</default>
  • Liens vers une page : <format>[[{{{lieu}}}]]</format>
  • Lien vers une catégorie : <format>[[Catégorie:{{{type voiture}}}]]</format>
  • Catégoriser une page : <format>{{{type voiture}}}[[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 :

Portable infobox icon

Champs avec formatage

<header>En-tête</header>
<data source="paramètre-1">
  <label>Libellé 1</label>
  <format>{{{paramètre-1}}} {{icône monnaie}}</format>
</data>
<data source="paramètre-2">
  <label>Libellé 2</label>
  <format>{{{paramètre-2}}} {{icône monnaie}}</format>
</data>
<data source="paramètre-3">
  <label>Libellé 3</label>
  <format>{{{paramètre-3}}} {{icône monnaie}}</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=(rang non reconnu)
              }}
  </format>
<default>Orc (rang inconnu)</default>
</data>

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

L'accès aux paramètres de modèle à partir d'autres balises de données peut être effectué en écrivant simplement {{{nom_du_paramètre_de_modèle}}}. Étant donné que la balise de données ne contient pas de source, la ligne sera masquée, à moins que vous ne mettiez votre fonction parseur dans la balise par défaut. Dans l'exemple ci-dessous, la ligne sera masquée, si le paramètre de modèle « début » n'est pas défini.

<data source="début">
    <label>Capacité de stockage au début</label>
</data>
<data>
    <label>Avec Entrepôt</label>
    <default>{{#if:{{{début|}}}|{{#expr:{{{début}}}*2}}}}</default>
</data>

Exemples[]

Voir aussi[]

Plus d'aide

Advertisement