Mit der Storyblok-Integration von Kontainer können Ihre Redakteure Bilder, Videos und Dateien direkt aus Ihrem DAM auswählen, ohne Dateien zu Storyblok hochzuladen. Storyblok speichert lediglich eine Referenz zur Datei; die eigentliche Datei bleibt in Kontainer und wird über das CDN ausgeliefert.

Weitere Informationen zu Anwendungsfällen, Vorteilen usw. finden Sie auf der Kontainer-Integrationsseite.

Voraussetzungen

Ein Storyblok-Space sowie Administratorrechte dafür – ohne diese lässt sich die Extension nicht installieren
Ein Kontainer-Konto (https://ihrunternehmen.kontainer.com)
Die aktivierte Storyblok-Integration in Ihrem Kontainer-Konto – klären Sie mit Ihrem Account Manager, ob sie in Ihrem Tarif enthalten ist

Was wird wo gespeichert

Ihre Dateien bleiben in Kontainer. Es wird nichts in die Asset-Bibliothek von Storyblok hochgeladen. Storyblok speichert einen gewöhnlichen Asset-Wert, der auf das Kontainer-CDN verweist, zusammen mit der Kontainer-Referenz:

filename – die CDN-URL, einschließlich der von Ihnen gewählten Download-Vorlage
alt, title – übernommen aus der Beschreibung der Datei in Kontainer
focus – der in Kontainer gesetzte Fokuspunkt, im Format von Storyblok
meta_data.kontainer_file_id, kontainer_folder_id, kontainer_url – Kennungen zum Abrufen der Datei
meta_data.kontainer_thumbnail_url, kontainer_extension, kontainer_type

Da der Alt-Text und der Fokuspunkt mit der Referenz übertragen werden, müssen Redakteure Metadaten nicht erneut in Storyblok eingeben. Wird eine Datei in Kontainer ersetzt, aktualisiert sie sich überall dort, wo sie verwendet wird.

Erste Schritte

1. Integration in Kontainer aktivieren

Bitten Sie Ihren Account Manager, die Storyblok-Integration für Ihr Kontainer-Konto zu aktivieren. Dadurch darf Storyblok den Kontainer File Picker einbetten; ohne diesen Schritt öffnet sich der Picker nicht.

2. Extension in Storyblok installieren

Öffnen Sie den Installationslink, wählen Sie den gewünschten Space aus und bestätigen Sie:

https://app.storyblok.com/#/install/kontainer@asset-picker

Dafür benötigen Sie Administratorrechte für den Ziel-Space. Die Installation erfolgt einmal pro Space.

3. Kontainer-Feld zu einem Block hinzufügen

Gehen Sie in Ihrem Space zur Block Library, öffnen Sie den Block, in dem Sie den Picker verwenden möchten, und fügen Sie ein neues Feld hinzu. Setzen Sie dessen Typ auf Plugin und wählen Sie kontainer aus der Liste.

4. Feld auf Ihr Kontainer ausrichten

Fügen Sie dem ausgewählten Feld die Option kontainerHost hinzu und tragen Sie Ihre Kontainer-Domain ein, zum Beispiel ihrunternehmen.kontainer.com (mit oder ohne https://).

Storyblok speichert Plugin-Optionen pro Feld – wiederholen Sie diesen Schritt daher für jedes Feld, das den Picker verwendet. Optionswerte werden von Storyblok nicht zwischen Spaces übernommen, jeder Space wird also separat konfiguriert.

5. Assets auswählen

Öffnen Sie eine Story, die den Block verwendet, und klicken Sie im Feld auf Select from Kontainer. Melden Sie sich beim ersten Mal mit Ihrem gewohnten Kontainer-Benutzernamen und Passwort an. Durchsuchen und filtern Sie Ihre Bibliothek wie gewohnt, wenden Sie optional eine Download-Vorlage an (Zuschnitt, Größenänderung, Format) und wählen Sie die Datei aus.

Das Feld zeigt anschließend eine Vorschau und den Dateinamen. Mit Replace asset wählen Sie eine andere Datei, mit Remove asset leeren Sie das Feld. Für Dateien, die keine Bilder sind – etwa PDFs und Videos – wird anstelle einer Bildvorschau eine Dateikarte mit dem Dateityp angezeigt.

Feldoptionen

Option	Erforderlich	Wert
`kontainerHost`	Ja	Ihre Kontainer-Domain, z. B. `ihrunternehmen.kontainer.com`
`mode`	Nein	`external` (Standard) verlinkt die Datei in Kontainer. `import` kopiert sie in die Asset-Bibliothek von Storyblok.
`storyblokRegion`	Nur bei Import	`eu` (Standard), `us`, `ca`, `ap` oder `cn`
`storyblokManagementToken`	Nur bei Import	Ein persönlicher Storyblok-Zugriffstoken mit Schreibrechten für Assets
`maxImportMb`	Nein	Maximale Dateigröße für den Import, Standard `50`

Optional: Dateien nach Storyblok importieren

Manche Teams verlangen, dass sämtliche Assets von Storyblok selbst gehostet werden. Wenn Sie mode auf import setzen, wird die Datei in die Asset-Bibliothek des Space kopiert statt verlinkt. Sie ist dann ein gewöhnliches Storyblok-Asset und kann vom Image Service von Storyblok transformiert werden.

Zwei Punkte sollten Sie beachten, bevor Sie ein Feld auf den Import-Modus umstellen:

Die Kopie wird nicht mehr aktualisiert, wenn sich die Datei in Kontainer ändert.
Der Management-Token ist eine Feldoption und wird damit an den Browser jedes Redakteurs ausgeliefert, der dieses Feld verwendet. Erstellen Sie dafür ein eingeschränktes Token: Vergeben Sie in Storyblok ausschließlich den Scope „Assets“ und beschränken Sie das Token auf den einen Space, der es benötigt. Verwenden Sie kein Token, das Zugriff auf Ihr gesamtes Konto hat.

Das Asset in Ihrem Frontend verwenden

Das Feld gibt ein gewöhnliches Storyblok-Asset-Objekt zurück und verhält sich damit wie jedes andere Asset-Feld:

const { filename, alt, focus } = story.content.hero;

Rufen Sie die Datei über filename ab – sie wird von Kontainers CDN ausgeliefert.

Der Image Service von Storyblok kann externe URLs weder skalieren noch zuschneiden. Verwenden Sie daher die Transformationsparameter von Kontainer oder eine bei der Auswahl gewählte Download-Vorlage, um Größe und Format der ausgelieferten Datei zu steuern. Der Fokuspunkt steht sowohl als focus-Wert von Storyblok als auch als Pixelkoordinaten in meta_data zur Verfügung.

Support

Wenn Sie Hilfe bei der Einrichtung oder Konfiguration des Storyblok-Plugins benötigen, hilft Ihnen unser Support-Team gerne weiter.

Bitte kontaktieren Sie uns unter: support@kontainer.com