Media in Widgets verwenden
Jedes Widget, das ein Bild, eine Galerie, ein Dokument oder eine herunterladbare Datei anzeigt, waehlt das Asset aus dem Media Manager. Diese Seite fuehrt durch den Picker-Workflow — vom Widget-Feld bis zur gespeicherten Referenz.
Voraussetzung: Die Datei liegt bereits im Media Manager. Falls nicht, starte bei Dateien hochladen.
Schritte
1. Bearbeitungs-Formular des Widgets oeffnen
Klick im Pagebuilder auf das Widget. Das Properties-Panel rechts zeigt seine Felder. Felder, die eine Datei akzeptieren, sehen aus wie ein Bild-Thumbnail mit einem Platzhalter-Icon.
2. Klick aufs Feld oeffnet den Media Manager
Der Media Manager oeffnet sich als Vollbild-Overlay. Du siehst das vertraute Layout: Ordnerbaum plus Datei-Raster.
3. Datei auswaehlen
Klick auf ein Datei-Thumbnail. Die Checkbox in der oberen linken Ecke wird gesetzt und das Thumbnail bekommt einen Rahmen. Nochmaliger Klick hebt die Auswahl auf.
Fuer Galerien oder Mehrfach-Dateifelder (Bildergalerie-Widget, Multi-Upload-Felder) waehlst du viele Dateien auf einmal, indem du auf jedes Thumbnail klickst. Nutze Shift+Klick fuer eine Bereichs-Auswahl und Ctrl+Klick / Cmd+Klick, um einzelne Dateien zur bestehenden Auswahl hinzuzufuegen.
4. Klick auf Speichern
Der Speichern-Button oben im Media Manager bestaetigt die Auswahl. Das Overlay schliesst sich und das Widget-Feld aktualisiert sich:
- Einzeldatei-Feld: zeigt die gewaehlte Datei als Thumbnail.
- Galerie- / Multi-Feld: zeigt einen Streifen von Thumbnails in der Reihenfolge, in der du sie gewaehlt hast.
Das Widget speichert jetzt ein Array wie [{"id":"321"}] (einzeln) oder [{"id":"321"},{"id":"322"}] (Galerie) in seinem Feld. Das Frontend loest die ID zur Render-Zeit auf — ersetzt du die Datei spaeter, aktualisiert sich jede Seite, ohne dass du das Widget neu speicherst.
5. Widget speichern
Klick Speichern im Properties-Panel des Widgets, um das Widget selbst zu persistieren. Der Pagebuilder frischt die Vorschau mit dem neuen Bild auf.
Datei entfernen oder tauschen
Um eine Datei aus einem Widget-Feld zu entfernen, klick auf das kleine x-Overlay am Thumbnail im Widget-Formular. Das Feld wird leer; speichern persistiert die Aenderung.
Um eine Datei zu tauschen, klick erneut aufs Thumbnail — der Media Manager oeffnet sich mit der aktuellen Datei bereits ausgewaehlt. Waehle eine andere und klick Speichern.
Felder, die den Media Manager nutzen
Die haeufigsten Faelle:
| Widget-Feldtyp | Was gespeichert wird |
|---|---|
| Einzelbild / Icon | Eine Datei-ID. |
| Galerie | Ein geordnetes Array von Datei-IDs. |
| Dokument / Download-Link | Eine Datei-ID (PDF, VCF, etc.). |
| Hintergrundbild | Eine Datei-ID, als CSS-Background gerendert. |
| Video | Eine Datei-ID (mp4, mov) oder eine externe URL. |
Auch der Menue-Editor nutzt den Media Manager fuer Item-Bilder (z.B. Mega-Menue-Visuals).
Upload direkt aus dem Picker
Ist die gewuenschte Datei noch nicht im Media Manager, kannst du sie hochladen, ohne den Picker zu verlassen. Der Hochladen-Button und die Drop-Zone stehen genauso bereit wie im eigenstaendigen Media Manager. Nach dem Upload taucht die neue Datei im Raster auf; auswaehlen und Speichern klicken.
Galerie-Reihenfolge
Bei Galerie-Feldern ist die Reihenfolge der Auswahl auch die Render-Reihenfolge im Frontend. Willst du die Dateien in einer bestimmten Abfolge:
- Waehle sie nacheinander in dieser Reihenfolge aus (kein
Shift+Klick-Bereich — der garantiert keine Reihenfolge). - Das Frontend rendert sie in derselben Reihenfolge.
Zum Umsortieren oeffne den Picker erneut und waehle von vorn, oder oeffne die Item-Liste des Galerie-Widgets und sortiere per Drag-and-Drop.
Siehe auch
- Media Manager Ueberblick — Ordner, Dateitypen, Rechte.
- Dateien hochladen — neue Medien hinzufuegen.
- Seiten & Pagebuilder — wo Widgets bearbeitet werden.