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. Wird zusätzlich der Parameter plaintext übergeben, ist der Text einzeilig.
    • 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 (mehr erfahren).
    • code: Ein Quelltext Editor (mehr erfahren).
    • file: Eine Datei in einem Iframe anzeigen. Kann stattdessen auch den Office Editor verwenden.
  • title: Der Titel, der bei der Visualisierung für diesen Block angezeigt wird. Wird keiner angegeben, wird die Feld Bezeichnung verwendet.
  • default: Der Standardwert.
  • placeholder: Ein Platzhalter, der im Administrationsbereich angezeigt wird, wenn kein Wert angegeben ist.
  • 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><#></figcaption></figure>"}
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.