FANDOM


Portable Infoboxen beinhalten einige Tags und Optionen, die dir dazu dienen, die Infobox so darzustellen, wie du willst. Unten sind alle Standard-Tags mit jeweils einem Wikitext-Beispiel und dessen HTML-Ausgabe aufgelistet, die dir dabei helfen sollen zu erkennen, welche Tags du benutzen musst und wie du die Infoboxen mit CSS anpassen kannst (siehe hierfür auch: Hilfe:Infoboxen/CSS). Bedenke, dass auch Parser-Funktionen genutzt werden können.

Alle Infoboxen sollten gemäß der XML-Konvention (→ Wikipedia) mit Attributen (→ Wikipedia englisch) deklariert werden, die zur Feldkonfiguration verwendet werden.


Hilfeseiten zu den portablen Infoboxen:

Basis-TagsBearbeiten

infoboxBearbeiten

Attribute
  • theme
  • theme-source
  • layout
  • accent-color-source
  • accent-color-text-source
  • accent-color-default
  • accent-color-text-default
Child tags
  • title
  • image
  • header
  • navigation
  • data
  • group

Das Tag, welches alle anderen beinhaltet und den Geltungsbereich der Infobox abgrenzt.

Eingabe Ausgabe
<infobox>
	<title source="title" />
</infobox>
<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
	<h2 class="pi-item pi-item-spacing pi-title">title</h2>
</aside>


titleBearbeiten

Attribute
  • source
Child tags
  • default
  • format

Gibt den Titel der Infobox an (sollte nur einmal pro Infobox verwendet werden). Bilder, die innerhalb eines title-Tags verwendet werden, werden in der mobilen Ansicht nicht angezeigt.[1].

Eingabe Ausgabe
<title source="Titel">
	<default>{{PAGENAME}}</default>
</title>
<h2 class="pi-item pi-item-spacing pi-title">Page name</h2>

dataBearbeiten

Attribute
  • source
  • span
  • layout
Child tags
  • default
  • label
  • format

Standard-Tag des Schlüsselwerts.

Eingabe Ausgabe
<data source="Name">
	<label>Vorname</label>
	<default>John</default>
</data>
<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">Vorname</h3>
	<div class="pi-font pi-data-value">John</div>
</div>

Ausgabe-ModifizierungenBearbeiten

labelBearbeiten

Attribute None
Child tags None

Label-Tag, kann nur innerhalb von anderen Tags verwendet werden, überprüft, ob Spalten untergeordneter Tags weitere Informationen enthalten. Akzeptiert Wikitext.

Eingabe Ausgabe
<label>Vorname</label>
<h3 class="pi-secondary-font pi-data-label">Vorname</h3>

defaultBearbeiten

Attribute None
Child tags None

Standard-Tag, dessen Inhalt benutzt wird, wenn „source“ leer oder nicht näher spezifiziert ist, kann nur innerhalb von anderen Tags verwendet werden, überprüft, ob Spalten untergeordneter Tags weitere Informationen enthalten. Akzeptiert Wikitext.

Eingabe Ausgabe
<default>John</default>
<div class="pi-font pi-data-value">John</div>

formatBearbeiten

Attribute None
Child tags None

Format-Tag, kann nur innerhalb von anderen Tags verwendet werden, überprüft, ob Spalten untergeordneter Tags weitere Informationen enthalten. Akzeptiert Wikitext.

Eingabe Ausgabe
<data source="Dollar">
	<label>Regulärer Preis</label>
	<format>${{{Dollar}}}</format>
</data>
<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">Regulärer Preis</h3>
	<div class="pi-font pi-data-value">$15</div>
</div>

Bilder-TagsBearbeiten

imageBearbeiten

Attribute
  • source
Child tags
  • alt
  • caption
  • default

Bild-Tag, wird benutzt, um Dateien (Bilder oder Videos) in einer Infobox anzeigen zu können. Es kann mit CSS in der jeweiligen Community gestylt werden, aber die Größe der Datei kann nicht manuell geändert werden. Mehrere Bilder können mit dem gallery-Tag angeordnet werden.

Hier wird das default-Tag benutzt, um ein Standardbild anzuzeigen, wenn beim Einbinden der Infobox kein Bild gewählt wird, z. B. <default>Logo.jpg</default>.
Eingabe Ausgabe
<image source="Bild" />
<figure class="pi-item pi-image">
	<a href=".../File:Image.jpg" class="image image-thumbnail" title="">
		<img src="Image.jpg" class="pi-image-thumbnail" alt="" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
	</a>
</figure>

altBearbeiten

Attribute
  • source
Child tags
  • default

Kann nur innerhalb eines Bild-Tags verwendet werden.

Eingabe Ausgabe
<image source="image">
	<alt source="alternativer_text">
		<default>Default alt text</default>
	</alt>
</image>
<figure class="pi-item pi-image">
	<a href=".../File:Image.jpg" class="image image-thumbnail" title="Default alt text">
		<img src="Image.jpg" class="pi-image-thumbnail" alt="Default alt text" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
	</a>
</figure>

captionBearbeiten

Attribute
  • source
Child tags
  • default
  • format

Dient zum Hinzufügen einer Bildbeschreibung. Kann nur innerhalb eines Bild-Tags verwendet werden.

Eingabe Ausgabe
<image source="image">
	<caption source="Bildbeschreibung">
		<default>Meine Bildbeschreibung</default>
	</caption>
</image>
<figcaption class="pi-item-spacing pi-caption">Meine Bildbeschreibung</figcaption>

Andere TagsBearbeiten

groupBearbeiten

Attribute
  • layout
  • show
  • collapse
  • row-items
Child tags
  • data
  • header
  • image
  • title
  • navigation
Wird zur Gruppierung von Feldern verwendet, kann für jede Gruppe einen Header bereitstellen. Eine Gruppe wird nicht gerendert (einschließlich jeden Header), wenn alle Felder leer sind. Wenn jedoch das Attribut incomplete, benutzt wird, werden alle Felder der Gruppe gerendert, wenn mindestens ein Feld nicht leer ist.

Standard-GruppeBearbeiten

Eingabe Ausgabe
<group>
	<header>Gruppenname</header>
	<data source="value1" />
</group>
<section class="pi-item pi-group pi-border-color">
	<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Gruppenname</h2>
	<div class="pi-item pi-item-spacing pi-data pi-border-color">
		<div class="pi-font pi-data-value">Data value</div>
	</div>
</section>

Horizontale GruppeBearbeiten

Eingabe Ausgabe
<group layout="horizontal">
	<header>Gruppenname</header>
	<data source="value1">
		<label>Data label</label>
	</data>
</group>
<section class="pi-item pi-group pi-border-color">
	<table class="pi-horizontal-group">
		<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Gruppenname</caption>
		<thead>
			<tr>
				<th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Data label</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Data value</td>
			</tr>
		</tbody>
	</table>
</section>

Intelligente GruppeBearbeiten

Eingabe Ausgabe
<group row-items="3">
    <header>Header des Abschnitts</header>
    <data source="row3">
      <label>Label</label>
    </data>
    <data source="row4">
      <label>Label</label>
    </data>
    <data source="row5">
      <label>Label</label>
    </data>
    <data source="row6">
      <label>Label</label>
    </data>
    <data source="row7">
      <label>Label</label>
    </data>
    <data source="row8" layout="default">
      <label>Label</label>
    </data>
    <data source="row9" layout="default">
      <label>Label</label>
    </data>
  </group>
<section class="pi-item pi-group pi-border-color"><h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Header des Abschnitts</h2>
<section class="pi-item pi-smart-group pi-border-color">
 
        <section class="pi-smart-group-head">
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 
        </section>
 
    <section class="pi-smart-group-body">
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">CCC</div>
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">DDD</div>
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">EEE</div>
 
    </section>
</section>
<section class="pi-item pi-smart-group pi-border-color">
 
        <section class="pi-smart-group-head">
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</h3>
 
        </section>
 
    <section class="pi-smart-group-body">
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">FFF</div>
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">GGG</div>
 
    </section>
</section>
 
<div class="pi-item pi-data pi-item-spacing pi-border-color">
 
		<h3 class="pi-data-label pi-secondary-font">Label</h3>
 
	<div class="pi-data-value pi-font">HHH</div>
</div>
 
<div class="pi-item pi-data pi-item-spacing pi-border-color">
 
		<h3 class="pi-data-label pi-secondary-font">Label</h3>
 
	<div class="pi-data-value pi-font">III</div>
</div>
</section>

headerBearbeiten

Attribute None
Child tags None

Das Header-Tag bezeichnet den Anfang eines Abschnitts oder einer Gruppe von Tags.

Eingabe Ausgabe
<header>Header-Text</header>
Standard-Gruppe
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Header-Text</h2>
Horizontale Gruppe


<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Header-Text</caption>

navigationBearbeiten

Attribute None
Child tags None

Wird zur Bereitstellung von Wikitext verwendet.

Eingabe Ausgabe
<navigation>[[Link]]</navigation>
<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation">
	<a href="/wiki/Link" title="Link">Link</a>
</nav>

AnmerkungenBearbeiten

  1. Englisches Portability-Hub, Office Hours-Thread

Mehr HilfeBearbeiten