Block erstellen

Um eigene Blöcke zu erstellen, legen Sie das Unterverzeichnis blocks an. Hier finden sich ähnlich wie beim Unterverzeichnis layouts Dateien, deren Dateiname die Bezeichnung des Blocks ist. Einzelne Seitentypen können zusätzliche Blöcke definieren, die dann mit den allgemein verfügbaren Blöcken zusammengeführt werden.

In einem Block wird das HTML definiert, das für diesen Block gilt.

warning
Bitte beachten Sie, dass HTML, das eher das Grundgerüst definiert, besser im Layout definiert werden sollte.

Mit dem Smarty Plugin {value} können Sie unterschiedliche Elemente einsetzen. Folgendes Beispiel gibt z.B. an, dass in einem Container ein Inhalt eingegeben werden kann.

<div>
{value var="content1" type="content" title="Inhalt"}
</div>

Oder ein Bild neben einem Inhalt.

<div>
{value var="image1" type="image" title="Bild"}
</div>
<div>
{value var="content1" type="content" title="Inhalt"}
</div>
<br/>

Folgende Parameter sind für {value} möglich:

  • var: Die Bezeichnung des Feldes. Wir empfehlen einheitliche Bezeichnungen zu verwenden, wie z.B. für alle Inhalte content1. Wenn Sie in einem Block mehr Inhalte definieren, dann wären die weiteren Bezeichnungen entsprechend content2, content3, usw. Wenn Sie dieses Prinzip beibehalten, können Sie Blöcke ersetzen und die bereits eingetragenen Inhalte/Werte werden automatisch für die neuen Blöcke übernommen.
  • type: Gibt den Typ des Elements an. Folgende Typen existieren:
    • text: Ein mehrzeiliger Text ohne Formatierung.
wb_incandescent
Übergeben Sie zusätzlich den Parameter plaintext, um einen einzeiligen Text zu erhalten.
  • minimal: Ein minimalistischer Inhaltseditor (nur Fett, Kursiv und Verweise).
  • content: Ein gewöhnlicher Inhaltseditor (keine Tabellen, keine Bilder können eingefügt werden).
  • editor: Ein komplexer Inhaltseditor (Tabellen, Bilder können eingefügt werden).
  • image: Ein Bild.
  • video: Ein Video.
  • audio: Ein Audio.
  • media: Ein Bild oder ein Video.
  • link: Ein Verweis mit einzeiligem Linktext.
  • table: Eine Tabelle (
  • ).
  • code: Ein Quelltext Editor (mehr erfahren).
  • title: Der Titel, der bei der
  • Visualisierung für diesen Block angezeigt wird. Wird keiner angegeben, wird die Feld Bezeichnung verwendet.
  • default: Der Standardwert.
  • srcset: Bei einem Bild Element können Sie mehrere Auflösungen unterstützen. Der Browser des Betrachters verwendet dabei automatisch das am besten passende Bild aus. Hierbei werden kommasepariert mehrere Größen übergeben. Standardmäßig ist dieser Wert vom System bereits sinnvoll gesetzt und kann von Ihnen ignoriert werden.
  • attr: Eine Liste von Attributen und Werten, die das erzeugte HTML erhalten soll (z.B. attr.class="my-link").
  • style: Direkte Style Anweisungen für das Editor Element.
  • maxlength: Die maximale Länge des Inhalts.
  • plugins: Die Editor Einstellungen für plugins überschreiben oder beginnend mit einem + Zeichen erweitern.
  • toolbar: Die Editor Einstellungen für toolbar überschreiben oder beginnend mit einem + Zeichen erweitern.
  • menubar: Die Editor Einstellungen für menubar überschreiben oder beginnend mit einem + Zeichen erweitern.
  • optional: Das Element wird nicht angezeigt wenn es leer ist und der Block nicht aktiv ist.
  • wrapper: HTML, das um den generierten Wert gelegt wird. Ist kein Wert angegeben, wird auch das umfassende HTML nicht gesetzt. Verwenden Sie <%> als Platzhalter für den Wert, z.B. wrapper="<h2><%></h2>". So können Sie komplexere optionale Felder erzeugen, die keine Ausgabe liefern, wenn nichts angegeben wurde (in diesem Beispiel kein leeres <h2></h2>).
  • href: Setzen Sie diesen Parameter auf false, wenn Sie keine URL Zuweisung für dieses Element verwenden wollen.
  • url: Wenn für das Element eine URL ausgewählt werden kann (z.B. image), wird diese standardmäßig in einem Link um das zugehörige HTML verwendet. Setzen Sie hier einen CSS Selektor, wenn diese URL in einem anderen, zugehörigen HTML Element verwendet werden soll (nur sinnvoll, wenn Sie wrapper und/oder caption
  • nutzen, da hier das Standard HTML um eigenes HTML erweitert wird). Beispiel:
    {value var="image1" type="image" title="Bild" caption="<figure><%><figcaption><a><#></a></figcaption></figure>" url="a"}
    wb_incandescent
    Es gibt noch einen weiteren Wert für type, welcher sogar ermöglicht Werte in HTML Attributen individuell zu setzen (value). Details dazu finden Sie hier.
    warning
    Die Funktion {value} ist eigentlich für den Einsatz in Blöcken gedacht. Falls notwendig, können Sie diese Funktion auch außerhalb von Blöcken und innerhalb des Layouts nutzen.
    wb_incandescent
    Geben Sie für var eine Bezeichnung mit einem = Zeichen am Anfang an, um den verwendeten Wert mit einem anderen Wert zu koppeln. Wenn Sie z.B. auf das Extrafeld news_date zugreifen möchten, geben Sie var="=extra.news_date" an. Auf diese Weise können Sie Einstellungen von anderen Reitern gleichzeitig im Inhalt ändern.
    wb_incandescent
    Wenn Sie Einstellungen über plugins, toolbar oder menubar zentral für alle Blöcke vornehmen wollen, können Sie entsprechende Eigenschaften in der conf.json Datei setzen.