Content-Elemente — Referenz

Content-Elemente sind die einzige erlaubte Art, CMS-pflegbare Inhalte in einer Block-Komponente auszugeben. Sie sind unveränderlich: exakt so verwenden wie hier gezeigt, keine eigenen Attribute erfinden. Nur bei repeatable und fromdatabase bestimmst du den Inhalt des Slots frei.

Grundprinzip: db, val und dbKeys

• Jede Block-Komponente bekommt über [[orblio_inject_props]] ein db-Objekt — den reaktiven Datenspeicher des Blocks. Alle Elemente erhalten :db="db".
• val zeigt auf den Schlüssel in db, den das Element besetzt.
• Der <config>-Block deklariert über dbKeys, welche Schlüssel es gibt und welchen Typ sie haben.

dbKeys-Typen (einfache Elemente)

Einfache Elemente

vtext — einfacher, unformatierter Text

<vtext :db="db" val="text1"></vtext>

Config: "text1": "text". Gibt reinen Text aus. Für alle designfixen Texte: Überschriften, Hero-Titel, Eyebrows, Card-Titel, Button-Beschriftungen, Zahlen. Der CMS-User ändert nur den Text, nie die Formatierung — so bleibt das Design unzerstörbar. Im Zweifel immer vtext.

htmltext — formatierter Text (Editor.js)

<htmltext :db="db" val="text2"></htmltext>

Config: "text2": "htmltext". Nur dort, wo der User bewusst selbst formatieren, gliedern und Links/Buttons setzen soll — Fliesstext, Beschreibungen, Artikelkörper. Editor.js-Blöcke tragen die Klasse .ce-block. Styling unter einer Wrapper-Klasse:

.mein_richtext {
    & h2, & h3 { color: var(--c-text); }
    & p  { color: var(--c-text-soft); line-height: 1.75; }
    & a  { color: var(--c-accent); text-decoration: underline; }
}

oimage — Bild (mit Fokuspunkt)

<oimage :db="db" val="image1"></oimage>

Config: "image1": "image". Rendert ein <picture> mit responsivem srcset innerhalb von article > .focus-image-container > img. Bild über einen Wrapper mit festem Seitenverhältnis steuern:

Styling über einen Wrapper mit festem Seitenverhältnis:

.mein_img_wrap {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    & .focus-image-container { width: 100% !important; height: 100% !important; }
    & img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

ovideo — Video

<ovideo :db="db" val="video1" w="100%" :autoplay="false"></ovideo>

Config: "video1": "video". Attribute: w (Breite), :autoplay (Boolean). Rendert .orb_videoout > video. Immer ein Wrapper-aspect-ratio setzen, sonst kollabiert das Layout beim Laden.

oicon — Symbol aus der Icon-Bibliothek neu

<oicon :db="db" val="feature_icon"></oicon>

Config: "feature_icon": "icon". Zeigt ein SVG aus der Icon-Bibliothek des Templates — den SVG-Dateien unter templates/<template>/files/icons/. Der CMS-User wählt das Symbol aus einem Vorschau-Popup; gespeichert wird nur der Dateiname (ohne Endung).

Größe und Farbe kommen aus der Umgebung: das SVG wird auf 1em gezogen (folgt also der font-size) und übernimmt bei fill="currentColor" die Textfarbe. Rendert span.orb_icon > span.orb_icon_svg.

.c3_card_icon {
    font-size: 2rem;              /* steuert die Icon-Größe */
    color: var(--c-accent);      /* steuert die Icon-Farbe */
}

ofolder — Datei-/Ordnerauswahl

<ofolder :db="db" val="folder1"></ofolder>

Config: "folder1": "folder". Zeigt eine vom CMS-User gewählte Dateiliste/Downloads; nutzt die Icons aus dem files/-Ordner (pdf.svg, doc.svg …).

Container-Elemente

repeatable — wiederholbarer Block nach festem Mini-Template

<repeatable
    :count="'infinite'" elm="div" cls="c5_rep_inner"
    :basekeys="['text', 'image']"
    :db="db" val="_order"
    v-slot="{ index, keys }">
    <div class="c5_rep_text"><htmltext :db="db" :val="keys.text"></htmltext></div>
    <div class="c5_rep_img"><oimage :db="db" :val="keys.image"></oimage></div>
</repeatable>

Config: "repeatable": { "text": "htmltext", "image": "image" }

Mechanik: Items werden über db[val] als Index-Array gespeichert (z. B. [1,2,3]). Pro Item-Index N lautet der echte DB-Key basekey + (N > 0 ? N : '') — Item 1 ⇒ text, Item 2 ⇒ text2 usw. keys ist eine Map { basekey: echterDbKey }; darum bindest du innen :val="keys.text" (mit Doppelpunkt!).

repeatcontents — gemischte, frei sortierbare Blöcke

<repeatcontents
    :count="'infinite'" elm="div"
    :typesettings="{ 'htmltext': 'rctext', 'oimage': 'rcimage', 'ovideo': 'rcvideo' }"
    :db="db" val="_rcorder"></repeatcontents>

Config: "repeatcontent1": "repeatcontent". Kein v-slot — das Element rendert sich selbst. :typesettings mappt Element-Typ → CSS-Klasse, sodass du jeden Typ (.rctext, .rcimage …) stylen kannst.

fromdatabase — Daten aus einer Sammlung

<fromdatabase
    :count="50" elm="div" cls="c6_inner"
    :basekeys="['title', 'image']"
    :db="db" val="_fdb"
    v-slot="{ index, keys }">
    <h3>{{ keys.title }}</h3>
    <img :src="keys.image" />
</fromdatabase>

Config: "fromdatabase": { "text": "title", "image": "image" } — Richtung Typ → Feldname (umgekehrt zu repeatable). Braucht die Sammlung mehrere Felder desselben Typs, wird der Typ durchnummeriert ("text2": "category").

Sammlungs-Modus & Platzhalter neu

Neben fromdatabase gibt es eine flexiblere Art, Sammlungsdaten anzuzeigen: Ein repeatable kann im Sammlungs-Modus laufen und pro Datensatz eine Zeile rendern. Der Clou: Innerhalb dieser Zeilen funktionieren die ganz normalen Elemente (vtext, oimage, oicon …) — der CMS-User verbindet sie im Editor mit einer Spalte der Sammlung, oder du greifst über Platzhalter direkt auf Felder zu.

Platzhalter [[c:feld]]

In jedem Text- oder URL-Wert eines Elements lösen sich Sammlungs-Platzhalter gegen den aktuellen Datensatz auf — sowohl auf einer Detailseite als auch in jeder Zeile eines Sammlungs-repeatable:

Styling-Verträge (Kurzüberblick)