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

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

Voraussetzungen

  • Strapi v5.50 oder höher (Strapi v4 wird nicht unterstützt)
  • Node.js 18+
  • Ein Kontainer-Konto (https://ihrunternehmen.kontainer.com)
  • Ein Entwickler mit Zugriff auf Ihre Strapi-Codebasis und das Deployment

Halten Sie Ihre Strapi-Installation mit den neuesten Minor-Releases aktuell, um vor bekannten Sicherheitslücken geschützt zu sein.

Was wird wo gespeichert

Ihre Dateien bleiben in Kontainer. Es wird nichts in die Strapi-Mediathek hochgeladen. Strapi speichert nur eine JSON-Referenz zur Datei, die folgendes enthält:

  • fileId, fileName, folderId – Kennungen zum Abrufen der Datei
  • url – die CDN-URL, einschließlich der von Ihnen gewählten Download-Vorlage
  • thumbnailUrl, type, extension, Abmessungen, Dateigröße
  • alt, description und alle benutzerdefinierten Kontainer-Felder

Da der Alt-Text und alle benutzerdefinierten Feldwerte mit der Referenz übertragen werden, müssen Redakteure Metadaten nicht erneut in Strapi eingeben, und Ihr Frontend kann sie direkt aus der Strapi-API-Antwort auslesen.

Erste Schritte

1. Plugin installieren

In Ihrem Strapi-Projekt:

npm install @kontainer/strapi-plugin

Committen Sie package.json und package-lock.json, damit das Plugin mit Ihrem Deployment ausgeliefert wird. Strapi erkennt und aktiviert das Plugin automatisch – es sind keine Änderungen an Konfigurationsdateien erforderlich.

2. Kontainer-Feld zu einem Content-Type hinzufügen

Wählen Sie im Content-Type Builder Custom fields → Kontainer media, oder fügen Sie es direkt zum Schema hinzu:

"hero": {
"type": "customField",
"customField": "plugin::kontainer.media"
}

Der Content-Type Builder ist in der Produktionsumgebung nur lesbar, führen Sie diese Änderung daher in Ihrer Entwicklungsumgebung durch und deployen Sie die Schema-Änderung.

3. Build

Die Admin-Oberfläche des Plugins wird in das Admin-Bundle kompiliert. Dieser Schritt ist erforderlich – ohne ihn erscheint die Schaltfläche „Choose from Kontainer" nicht.

npm ci --omit=dev
npm run build
npm run start

4. Mit Kontainer verbinden

Gehen Sie zu Settings → Kontainer → Configuration und geben Sie Ihre Kontainer-URL ein, z. B. https://ihrunternehmen.kontainer.com. Das ist die gesamte Einrichtung – es werden keine API-Schlüssel oder Umgebungsvariablen benötigt.

Die Einstellungen werden in der Strapi-Datenbank gespeichert, daher müssen Sie sie einmal pro Umgebung (Staging und Produktion getrennt) festlegen.

Wenn Sie Ihre Konfiguration als Code verwalten, können Sie die Kontainer-URL stattdessen in Ihrer Strapi-Plugin-Konfiguration festlegen, zum Beispiel über eine Umgebungsvariable. Eine im Admin-Panel gespeicherte URL hat Vorrang.

5. Assets auswählen

Klicken Sie im Editor auf Choose from Kontainer im entsprechenden Feld. Durchsuchen, filtern und stöbern Sie in Ihrer Kontainer-Bibliothek, wenden Sie optional eine Download-Vorlage an (Zuschnitt, Größenänderung, Format) und wählen Sie die Datei aus. Strapi speichert die Referenz; die CDN-URL spiegelt die von Ihnen gewählte Vorlage wider.

Eigene Domains und Vorschaubilder

Das Plugin erlaubt automatisch, dass Kontainer-Vorschaubilder von kontainer.com-Domains und von einer in Ihrer Plugin-Konfigurationsdatei gesetzten URL im Strapi-Editor geladen werden. Wenn Sie eine eigene Domain verwenden und diese nur im Admin-Panel eingetragen haben, fügen Sie die Domain den Direktiven img-src und media-src in Ihrer Strapi-Middleware-Konfiguration (config/middlewares) hinzu. Andernfalls werden die Vorschaubilder im Editor nicht geladen. Das Plugin gibt beim Start eine Warnung im Log aus, wenn dies zutrifft.

Optional: Nutzungsverfolgung von Dateien

Kontainer kann Ihnen anzeigen, wo jede Datei in Strapi verwendet wird. Klicken Sie unter Settings → Kontainer auf Generate, um einen Token zu erstellen, und registrieren Sie anschließend die angezeigte Endpoint-URL zusammen mit dem Token als Integration in Kontainer unter Settings → Integrations. Kontainer fragt Strapi daraufhin ab und meldet die Nutzung über alle Content-Types hinweg, einschließlich Entwürfe, Sprachversionen, Komponenten und Dynamic Zones.

Entwickler können außerdem über den Usage-Endpoint des Plugins (/api/kontainer/usage/:fileId) prüfen, wo eine einzelne Datei verwendet wird, authentifiziert mit einem Strapi-API-Token.

Die Referenz in Ihrem Frontend verwenden

Die Referenz wird unverändert von der Strapi Content-API zurückgegeben:

const page = await fetch(`${STRAPI_URL}/api/pages/${documentId}`).then((r) => r.json());
const { url, alt } = page.data.hero;

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

Support

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

Bitte kontaktieren Sie uns unter: support@kontainer.com

Das Plugin ist Open Source (MIT-Lizenz). Den Quellcode finden Sie auf GitHub und das Paket auf npm.