FANDOM


90210-infobox-light

Un esempio d'infobox

Gli infobox sono come delle schede informative o come i riquadri laterali nelle riviste e servono per presentare un riassunto dell'argomento di quella pagina. Presentano degli elementi importanti in un formato organizzato e di facile lettura. Gli infobox sono in genere realizzati usando dei template per mantenere omogeneità e coerenza all'interno di una wiki.

FANDOM ha sviluppato un nuovo modo per creare gli infobox, gli "infobox portatili", che consente di farli apparire in maniera corretta su tutti i dispositivi, come illustrato di seguito. Non ci sono cambiamenti sull'uso degli infobox in un articolo; ciò che cambia, invece, è il modo in cui sono scritti in una pagina di template. È stato creato anche uno strumento per la conversione degli infobox esistenti; tutte le informazioni si trovano su Aiuto:Conversione infobox.

Link utili:


Come usare un infobox Modifica

Inserire un infobox nel VisualEditor

Inserire un infobox nel VisualEditor

Puoi aggiungere un infobox a un articolo nello stesso modo in cui aggiungeresti qualsiasi altro template, sia attraverso l'utilizzo degli strumenti integrati dell'editor, sia attraverso la modalità sorgente dell'editor. Nel VisualEditor si può utilizzare l'opzione "Infobox" del menù "Inserisci".

Nel caso del codice sorgente, in genere cominceresti copiando la sintassi dalla documentazione del template (che normalmente si trova in fondo alla pagina del template), incollandola in un articolo e cambiando le parole dopo i segni di uguale per fornire le informazioni desiderate. Ad esempio:

{{Infobox personaggio
| titolo = Margherita
| immagine = Esempio.jpg
| didascalia = Margherita nel vento
| posizione = Fiore supremo
| età = 2 mesi
| stato = Attivo
| altezza = 13 centimetri
| peso = 20 grammi
}}

Con gli infobox portatili, ciò funziona allo stesso modo dei template. Tuttavia, la sintassi nella pagina di template è leggermente diversa, come vedremo di seguito.

Come creare un infobox Modifica

Esempio infobox di base

Per prima cosa, crea un nuovo template con il nome che preferisci, in questo caso Template:EsempioInfobox. In passato avresti usato tabelle e div, ora invece si usano i tag infobox. Iniziamo con un infobox 'stacked' (impilato) di base, con un titolo e un'immagine:

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

Questo wikitext indicherà al tuo template di usare le variabili "nome" e "immagine" per gli elementi title e image. In aggiunta puoi usare il tag default, il cui valore sarà utilizzato quando un utente non specifica un nome/immagine ecc. nell'articolo.

A questo punto abbiamo solo bisogno di due altri campi contenenti informazioni aggiuntive. Cominciamo con il primo:

<data source="stagione"><label>Stagione(i)</label></data>

Dopo aver aggiunto un ultimo campo, con il codice "prima" e l'etichetta "Prima apparizione", concludiamo in questo modo:

<infobox layout="stacked">
  <title source="nome"><default>{{PAGENAME}}</default></title>
  <image source="immagine" />
  <data source="stagione"><label>Stagione(i)</label></data>
  <data source="prima"><label>Prima apparizione</label></data>
</infobox>

Adesso possiamo usare il template in un articolo e creare un infobox funzionante:

{{EsempioInfobox
 |nome   = Eddard Stark
 |immagine  = eddard.jpg
 |stagione = [[Stagione 1|1]]
 |prima  = "[[L'inverno sta arrivando]]"
}}

Come cambiare il layout di un infobox Modifica

Gli infobox che utilizzano questo tipo di codice hanno un design automatico basato sul tema della tua wiki. Se una variabile è lasciata vuota, la linea corrispondente del template non comparirà (a meno che non si usi il tag "default").

Opzioni di layout Modifica

Due opzioni alternative di layout sono disponibili per gli infobox:

Layout di default (a tabella) Layout "stacked" (impilato)
Le etichette vengono mostrate a sinistra dei valori Le etichette vengono mostrate sopra i valori
<infobox>
   ...
</infobox>
<infobox layout="stacked">
   ...
</infobox>
Screen Shot 2015-06-16 at 12.12.17

Layout di default (a tabella)

Screen Shot 2015-06-16 at 12.10.54

Layout "stacked" (impilato)

Temi personalizzati Modifica

Il tema di default degli infobox può essere personalizzato in due modi: attivando il "tema infobox Europa" nelle Wiki Funzioni, facendo questo gli infobox usaranno i colori adottati dal Theme Designer, oppure usando il CSS locale della community; gli attributi theme o theme-source del tag infobox permettono di selezionare infobox specifici usando le classi:

  • L'attributo theme si usa per specificare una classe CSS personalizzata per il template infobox.
  • L'attributo theme-source ti permette di variare la classe CSS tramite un parametro del template.

Per ulteriori informazioni e dettagli sull'utilizzo di questi attributi e sui temi degli infobox, consulta Aiuto:Infobox/CSS o cerca degli esempi di stili e temi sul Portability Hub!

Colori di complemento Modifica

I colori del titolo e delle intestazioni per testo e sfondo possono essere ulteriormente personalizzati per ogni infobox usando i parametri "accent-color". Come per theme-source, il colore usato è il valore del parametro del template indicato in accent-color-source (per gli sfondi) and accent-color-text-source (per il testo).

Esempio: se il template dell'infobox dichiara accent-color-source="bkg" e l'infobox nell'articolo dichiara bkg = #FFF, lo sfondo delle intestazioni e titoli sarà #FFF (il valore esadecimale per il bianco). I colori dichiarati in questo modo devono essere nel formato esadecimale (#FFF o #FFFFFF) o verranno ignorati.

I valori degli "accent-color" sovrascriveranno i colori impostati con "theme" o quelli predefinito.

Ciò include anche un parametro per un colore predefinito, per cui usare accent-color-default="#FFF" imposta il colore per tutti i titole e le intestazioni, mentre accent-color-text-default="#000000" funziona in maniera simile per il colore del testo, entrambi usano il formato esadecimale.

Come usare più immagini o video Modifica

Esempio infobox con schede

Immagini in schede

Per usare più immagini nella stessa posizione in un infobox, puoi semplicemente aggiungere il tag <gallery>.

{{EsempioInfobox
 |nome   = Eddard Stark
 |immagine  = <gallery>
Eddard.jpg|Primo piano
Eddard 2.jpg|Con un cavallo
Eddard 3.jpg|Sul trono
</gallery>
 |stagione = [[Stagione 1|1]]
 |prima  = "[[L'inverno sta arrivando]]"
}}

Per maggiori informazioni su questa personalizzazione, vedi questa discussione (in inglese).

Per inserire un video in un infobox, usa semplicemente il tag <image> come faresti con un'immagine. Quando viene inserito un video invece di un'immagine, viene mostrata una miniatura con il pulsante play e l'informazione della durata; cliccando sul video si apre il lettore di video. Per inserire più video, aggiungi un nuovo tag <image> per ogni video.

Come raggruppare i dati Modifica

Esempio di infobox avanzato

Adesso che hai creato un semplice infobox, puoi imparare a usare le opzioni più avanzate. In questa sezione ti mostriamo come creare l'infobox che vedi a destra.

Nella prima parte dell'infobox ci sono tre campi di dati, seguiti da quelli del titolo e dell'immagine. Come puoi vedere, il campo del titolo non deve necessariamente essere il primo.

<infobox layout="stacked">
  <data source="prec"><label>Precedente</label></data>
  <data source="cont"><label>Contemporanea</label></data>
  <data source="prox"><label>Prossima</label></data>
  <title source="nome" />
  <image source="immagine" />
</infobox>

Raggruppare le informazioni con il tag group Modifica

Il tag <group> ti permette di raggruppare insieme diversi campi e di dare a ogni gruppo un titolo. Ricorda: i campi dichiarati a cui non è stato assegnato un valore non compariranno. Questa regola vale anche per i gruppi: se a nessuno dei campi (escluso il tag header) all'interno di un gruppo viene assegnato un valore, l'intero gruppo non comparirà.

<infobox layout="stacked">
  <data source="prec"><label>Precedente</label></data>
  <data source="cont"><label>Contemporanea</label></data>
  <data source="prox"><label>Prossima</label></data>
  <title source="nome" />
  <image source="immagine" />
  <group>
    <header>Dettagli</header>
    <data source="conflitto"><label>Conflitto</label></data>
    <data source="data"><label>Data</label></data>
    <data source="luogo"><label>Luogo</label></data>
    <data source="risultato"><label>Risultato</label></data>
  </group>
</infobox>

Layout alternativo per i gruppi Modifica

Screen Shot 2015-06-16 at 13.27.08

Raggruppamento orizzontale

Invece del layout verticale, i gruppi possono avere un layout orizzontale in cui tutti i contenuti sono disposti l'uno accanto all'altro in una singola linea. Questo si può ottenere aggiungendo l'attributo layout="horizontal" al tag group.

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

Layout intelligenti per i gruppi Modifica

Il layout "intellignete" è simile al layout orizzontale (che fornisce delle righe in una struttura rigida). Consente ai campi dati di fluire in un gruppo singolo da una riga all'altra. Quando il numero dei campi raggiunge un limite predefinito, il campo successivo sarà mostrato nella riga sottostante. Gli elementi in una riga si adatteranno per occupare tutto lo spazio a disposizione.

Per usare il layout intelligente, aggiungi row-items="3" (o qualche altro numero che imposti il limite). Tutti gli elementi in un gruppo intelligente usano il layout orizzontale in maniera predefinita, per cui non è necessario aggiungere quell'attributo se si usano i gruppi intelligenti. Tuttavia è possibile mescolare cambi verticali e orizzontali aggiungendo l'attributo layout="default" ad un tag <data>.

Per far in modo che un campo occupi più di un singolo spazio, usa l'attributo span="2" in un tag <data>.

<infobox>
  <title source="name" />
  <image source="image" />
  <group row-items="3">
    <header>Details</header>
    <data source="conflict"><label>Conflict</label></data>
    <data source="date"><label>Date</label></data>
    <data source="place"><label>Place</label></data>
    <data source="result" layout="default"><label>Outcome</label></data>
  </group>
</infobox>

Forzare tutti gli elementi del gruppo a comparire Modifica

Usando show="incomplete", puoi forzare tutti gli elementi di un gruppo a comparire, anche quando sono vuoti, a meno che non siano tutti vuoti, nel qual caso il gruppo non compare per niente.

<group layout="horizontal" show="incomplete">
  <header>Combattenti/header>
  <data source="parte1" />
  <data source="parte2" />
</group>

Adesso combinando tutto questo otteniamo il codice finale del template:

<infobox layout="stacked">
  <data source="prec"><label>Precedente</label></data>
  <data source="cont"><label>Contemporanea</label></data>
  <data source="prox"><label>Prossima</label></data>
  <title source="nome" />
  <image source="immagine" />
  <group>
    <header>Dettagli</header>
    <data source="conflitto"><label>Conflitto</label></data>
    <data source="data"><label>Data</label></data>
    <data source="luogo"><label>Luogo</label></data>
    <data source="risultato"><label>Risultato</label></data>
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Combattenti</header>
    <data source="parte1" />
    <data source="parte2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Comandanti</header>
    <data source="comandanti1" />
    <data source="comandanti2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Forza</header>
    <data source="forza1" />
    <data source="forza2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Perdite</header>
    <data source="perdite1" />
    <data source="perdite2" />
  </group>
  <data source="civili"><label>Perdite civili</label></data>
</infobox>

Adesso possiamo usarlo in un articolo e il gioco è fatto:

{{Battaglia
 |prec        = [[Battaglia delle Isole Scudo]]
 |cont        = [[Saccheggio di Old Wyk]]
 |prox        = [[Saccheggio di Pyke]]
 |nome        = [[Saccheggio di Grande Wyk]]
 |immagine    = Ribe.jpg
 |conflitto   = [[Ribellione di Greyjoy]]
 |data        = 289 AL
 |luogo       = [[Grande Wyk]], [[Isole di Ferro]]
 |risultato   = vittoria di [[Casa Baratheon]]
 |parte1      = [[File:House-Greyjoy-heraldry.jpg|20px|link=Casa Greyjoy]] [[Casa Greyjoy]]
 |parte2      = [[File:Casa Baratheon.png|20px|link=Casa_Baratheon]] [[Casa Baratheon]]
 |comandanti1 = Sconosciuti
 |comandanti2 = Lord [[Stannis Baratheon]]
 |perdite1    = Sconosciute
 |perdite2    = Sconosciute
}}

Gruppi comprimibili Modifica

Gruppi comprimibili in infobox

Gruppi comprimibili in azione

I gruppi possono essere resi comprimibili aggiungendo collapse="open" oppure collapse="closed" al tag group. Questo farà in modo che la riga del titolo del gruppo sia cliccabile (per espandere/mostrare e comprimere/nascondere il gruppo) e il gruppo verrà visualizzato rispettivamente espanso o compresso.

<group collapse="closed">
<header>Dettagli</header>
    <data source="conflitto"><label>Conflitto</label></data>
    <data source="data"><label>Data</label></data>
    <data source="luogo"><label>Luogo</label></data>
    <data source="risultato"><label>Risultato</label></data>
</group>

Nota: affinché questo codice funzioni, la riga dell'header deve avere un contenuto e deve seguire immediatamente il tag group.

Opzioni avanzate Modifica

Formattazione Modifica

Se desideri aggiungere ulteriori elementi ai tuoi dati (come icone, categorie ecc.) o processare valori già inseriti, il tag "format" ti permette di farlo.

  • Quando viene usato il tag format, la variabile fornita in source= viene formattata/modificata come specificato all'interno del tag format.
  • Se la variabile fornita in source= è vuota, il nodo rende i valori che si trovano nei tag default (oppure no, nel caso in cui i tag di default non siano specificati).

Alcuni esempi:

  • Testo extra: €{{{prezzo}}}
  • Link: [[{{{luogo}}}]]
  • Categorie: [[Categoria:{{{tipo di auto}}}]]

Per esempio, possiamo inserire il template {{money icon}}:

<data source="prezzo">
  <label>Prezzo</label>
  <format>{{{prezzo}}} {{money icon}}</format>
</data>

L'effetto mostrato a destra può essere ottenuto con la seguente sintassi:

Field mutators

Campi con formattazione

<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>

Funzioni parser Modifica

Le funzioni parser possono essere inserite in qualsiasi infobox. Tuttavia, i risultati vengono automaticamente nascosti se il parametro, il tag o il data source non contengono alcun testo.

Codice del template Risultato
<data source="livello">
  <label>Rank</label>
  <default>Orc {{#switch:{{{level}}}|1=peon|2=grunt|#default=grunt}}</default>
</data>

Esempi Modifica

Vedi anche Modifica

Navigazione Modifica

Contenuti
Nozioni di base
Il tuo account Registrazione  • Login  • Preferenze  • Cambiare username
La tua wiki Creare una wiki  • Barra dei progressi della wiki  • Fondatori  • Tipi di utenti
Funzioni di Wikia Bacheca  • Notifiche  • Blog  • Forum  • Chat
Consigli Profilo  • Avatar  • Creare una wiki di successo  • Errori comuni
Contribuire
Aggiungere contenuti Nuova pagina  • Modifica  • Immagini  • Video
Formattazione VisualEditor  • Wikitext  • Stile della pagina  • Testo
Strumenti Wiki Activity  • Cronologia  • Aiuto:Barra degli strumenti  • Pagina di discussione Commenti  •
Suggerimenti Redirect  • Layout  • SEO  • La funzione Consigli  • Linee guida per le community
Gestire una community
Impostazioni Wiki Funzioni  • Pagine speciali  • Estensioni  • Protezione delle pagine
Strumenti per gli admin Pannello di controllo Admin  • Blocco degli utenti  • Strumento di benvenuto  • Angolo della Community
Design Theme Designer  • Menù di navigazione  • Pagina principale  • Pagina principale per mobile
Trucchi per la gestione Guida per gli Amministratori  • Costruire una community  • Regolamenti di una wiki  • Integrazione con i social
Nozioni avanzate
Estensioni Sondaggi  • Note  • DPL  • Mappe  • Funzioni parser
Strumenti & scorciatoie Messaggi di sistema  • Wikitext avanzato  • Parole magiche  • Esportare e importare pagine  • Caricare file multipli  • HTML
Consigli Titolo della pagina  • Descrizione  • Pratiche migliori per wikitext
Personalizzazione
Personalizzazione di base Theme Designer  • Sfondo  • Favicon  • Logo
Personalizzazione esperta Regole sulla personalizzazione  • CSS e JS della community  • CSS e JS personali  • CSS e JS avanzati
Tabelle e template Tabelle  • Infobox  • Template  • Parametri dei template
Altro... Tag per la pagina principale  • HeroImage  • Nuove gallerie immagini  • Lua
Mobile
Panoramica e consigli Introduzione alla versione mobile  • Pratiche migliori per wikitext  • Pagine principale su mobile  • Evitare tabelle nidificate
Prodotti per mobile App della Community  • Game guides  • Lyrically  • My Wikia
Trovare ulteriore aiuto
Consulta: Wiki della Community  • Blog di Wikia Italia  • Forum della Community  • Contatta Wikia  • Politiche di Wikia  • Aiuto di MediaWiki

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.