Bynder

Die KI-gestützte Digital-Asset-Management-Plattform von Bynder ermöglicht es Teams, wachsenden Content, Touchpoints und Beziehungen effizient zu verwalten. Sie vereinheitlicht und transformiert die Erstellung und den Austausch von Marken-Assets.

Nachdem Sie die Bynder-App installiert haben, können Editor*innen Medien aus ihrem Bynder-Konto direkt in Contentful auswählen, sodass Design- und Marketingteams ganz einfach auf ihre neuesten Assets zugreifen und sie verknüpfen können.

Apps Bynder dialog updated

Übersicht

Die Bynder-App ist ein Widget, mit dem Editor*innen Medien aus ihrem Bynder-Konto auswählen können. Klicken Sie auf Datei auf Bynder auswählen und wählen Sie die Assets aus, auf die Sie in Ihrem Eintrag verweisen möchten. Asset-Daten von Bynder werden direkt in Ihrem Content-Eintrag als JSON-Feld gespeichert, auf das Ihre Entwickler*innen direkt über die Bereitstellungs-APIs von Contentful verweisen können.

Die IDs der ausgewählten Medien werden dann in Contentful gespeichert. In Ihrer Client-Anwendung rufen Sie dann Content aus Contentful ab und lösen alle erforderlichen Details zu Medien auf, indem Sie die IDs verwenden, um Binärdateien oder Metadaten aus der Bynder-API abzurufen.

Anforderungen

Um diese App zu verwenden, benötigen Sie:

  • Die URL Ihres Bynder-Kontos.

  • Contenttyp mit einem Feld vom Typ JSON-Objekt, um die Verweise auf Bynder-Assets zu speichern.

  • Client-ID und Client-Geheimnis von Bynder, die in den App-Einstellungen konfiguriert sind.

  • OAuth2-Client-Anmeldeinformationen von Bynder mit API-Zugriffsberechtigungen.

Berechtigungen

Die folgenden Berechtigungen und Bereiche müssen aktiviert sein:

  • Möglichkeit, Assets und Portaleinblicke anzuzeigen.

  • grant_type: Client-Anmeldeinformationen.

  • scopes:

    • asset.read

    • asset.usage:read

    • asset.usage:write

Verwendung

Schritt 1: Modus auswählen

Die App bietet zwei Modi für die Asset-Auswahl:

MultiSelect-Modus

  • Standardmodus.

  • Ermöglicht es Content-Ersteller*innen, mehrere Assets gleichzeitig auszuwählen.

  • Unterstützt keine Auswahl von Derivaten oder Transformationen.

  • Empfohlen für die meisten Nutzer*innen.

Ihr Frontend sollte auf den src -Parameter oder ähnliche Bynder-URL-Felder zurückgreifen.

SingleSelectFile-Modus

  • Ermöglicht die Auswahl einer Datei auf einmal.

  • Unterstützt die derivative Bildauswahl und In-App-Transformationen (wenn CX Omnichannel aktiviert ist).

  • Stellt ein Attribut selectedFile in API-Antworten bereit.

Ihr Frontend sollte auf den Parameter selectedFile.url zurückgreifen, um das endgültige Bild zu rendern. Wenn Transformationen angewendet werden, verweist diese URL auf das transformierte Asset.

Schritt 2: Modus zum Vorabausfüllen ausgewählter Assets

Auf dem Konfigurationsbildschirm können Sie auswählen, ob neue Asset-Auswahlen an die vorhandenen Assets in Ihrem Eintrag angehängt oder diese ersetzt werden sollen.

Standard („Ausgewählte Assets vorab ausfüllen“ = Nein)

  • Ausgewählte Assets werden an das Feld angehängt.

  • Assets können mehrfach hinzugefügt werden.

  • Gespeicherte Assets werden beim erneuten Öffnen der Auswahl nicht vorausgewählt.

Vorab-Ausfüllmodus („Ausgewählte Assets vorab ausfüllen“ = Ja)

  • Neu ausgewählte Assets ersetzen alle vorhandenen Assets.

  • Assets können nicht mehr als einmal gespeichert werden.

  • Zuvor gespeicherte Assets werden in der Auswahl vorausgewählt.

Schritt 3: Installieren und konfigurieren

  1. Geben Sie unter Konfiguration die URL Ihres Bynder-Kontos an.

  2. Weisen Sie der App Felder vom Typ JSON-Objekt zu.

  3. Wählen Sie Ihren Auswahlmodus (MultiSelect oder SingleSelectFile).

  4. Wählen Sie Ihr Verhalten für das Vorabausfüllen („Ja“ oder „Nein“).

  5. Konfigurieren Sie Ihre Bynder-OAuth2-Anmeldeinformationen (Client-ID und Client-Geheimnis).

Wenn der SingleSelectFile-Modus und die TransformBaseURL verwendet werden, enthalten die API-Antworten Transformationsparameter wie Höhe, Breite und Schwerkraft für die ausgewählte Ableitung.

Apps Bynder installation screen

Klicken Sie auf Installieren, um die Installation abzuschließen und die Konfiguration zu speichern.

Schritt 4: Verwenden der App

Mehrfachauswahlmodus

Apps Bynder select file on Bynder

So verweisen Sie von Ihrem Eintrag aus auf ein Asset in Bynder:

  1. Klicken Sie auf Datei auf Bynder auswählen.

  2. Wählen Sie die Assets in Bynder über das Dialogfenster aus.

  3. Klicken Sie auf Asset hinzufügen.

Apps Bynder dialog updated

Ihre Frontend-Entwickler*innen erhalten eine JSON-Nutzlast mit einem Parameter ähnlich wie „original“: „ https://BRAND.getbynder.com/~/file.jpg“. Es wird empfohlen, dass sie die Felder original oder src verwenden, um Assets abzurufen. Die in dieser Antwort verfügbaren spezifischen Felder können je nach Ihrer spezifischen Bynder-Konfiguration und Ihrem Paket variieren.

Apps Bynder selected assets in field location

Vorschauen Ihrer Assets werden nun in Ihrem Eintrag angezeigt. Sie können auch auf „Weitere Details“ klicken, um den Namen und die ID des Assets anzuzeigen.

Apps Bynder selected assets more details

Einzeldatei-Auswahlmodus

So verweisen Sie von Ihrem Eintrag aus auf ein Asset in Bynder:

  1. Klicken Sie auf Datei auf Bynder auswählen.

  2. Wählen Sie die Assets in Bynder über das Dialogfenster aus.

  3. Wählen Sie entweder eine abgeleitete oder eine Transformationsbasis-URL aus und nehmen Sie alle erforderlichen Transformationen vor.

  4. Klicken Sie auf Asset hinzufügen.

Bynder Single File Select

Ihre Frontend-Entwickler*innen erhalten eine von zwei JSON-Nutzlasten, die das Attribut selectedFile enthalten. In beiden Fällen sollten Ihre Entwickler*innen den Parameter „url“ unter dem Parameter „selectedFile“ abrufen, um das genau transformierte Bild zu erhalten.

Wenn der SingleSelectFile-Modus und die TransformBaseURL mit einer benutzerdefinierten Transformation ausgewählt sind, enthält die Antwort Parameter für die Transformations-URL, die die angeforderte Höhe, Breite, den Transformationstyp und die Schwerkraft bereitstellen. Wenn der SingleSelectFile-Modus und die TransformBaseURL ohne benutzerdefinierte Transformation ausgewählt sind, erhalten Sie Parameter für Höhe, Breite und Dateigröße als separate Attribute.

Vorschauen Ihrer Assets werden nun in Ihrem Eintrag angezeigt.

Asset-Tracker

Der Asset-Tracker synchronisiert die Nutzung von Bynder-Assets automatisch mit Contentful Einträgen mithilfe von Contentful App-Ereignissen.

So funktioniert es

  • Erstellt Nutzungsdatensätze, wenn Einträge veröffentlicht werden.

  • Aktualisiert Datensätze, wenn Einträge erneut veröffentlicht werden.

  • Entfernt Nutzungsdatensätze, wenn Einträge gelöscht oder archiviert werden, oder die Veröffentlichung aufgehoben wird.

  • Verfolgt Assets nur in der Master-Umgebung.

Konfigurationsschritte

  1. Stellen Sie sicher, dass die Client-ID und das Geheimnis von Bynder mit den richtigen Berechtigungen konfiguriert sind.

  2. Implementieren Sie die bereitgestellte Contentful Funktion functions/asset-tracker.ts als App-Ereignis-Backend-Handler.

  3. Konfigurieren Sie App-Ereignisse in Contentful, um die Funktion für Veröffentlichen, Aufheben der Veröffentlichung, Löschen und Archivieren von Ereignissen auszulösen.

  4. Überprüfen Sie, ob die Bynder-OAuth2-Anmeldeinformationen über Bereiche für die Asset-Nutzungs-API verfügen.

Hinweis: Die Asset-Verfolgung erfordert ordnungsgemäß konfigurierte Bynder-OAuth2-Anmeldeinformationen mit den erforderlichen Bereichen (asset.read, asset.usage:read, asset.usage:write), um korrekt zu funktionieren.

FAQ

Es gibt keine Contenttypen mit dem Feld JSON-Objekt, Hilfe!

Bynder speichert Daten in einem Contentful Eintrag mit JSON-Daten. Wenn Sie Bynder-Assets einem bestimmten Contenttyp zuordnen möchten, müssen Sie diesen Contenttyp aktualisieren, um ein neues Feld vom Typ JSON-Objekt einzuschließen. Erfahren Sie mehr über den Feldtyp JSON-Objekt in unserer Konzepte-Dokumentation.

Was tun, wenn der Eintragseditor die Warnung anzeigt Feldwert ist nicht kompatibel?

Das Feld „JSON-Objekt“ dieses Eintrags enthält bereits Daten, die nicht von der Bynder-App generiert wurden. Stellen Sie sicher, dass Sie in der App-Konfiguration das richtige Feld für die Verwendung mit Bynder ausgewählt haben und dass Sie die zuvor eingegebenen Daten nicht mehr benötigen. Wählen Sie dann Ich möchte den Wert mit der App überschreiben, wodurch das Feld mit einer leeren Auswahl initialisiert wird. Jetzt können Sie Ihrem Eintrag Medien hinzufügen.

Um auf den zugrunde liegenden Feldwert zuzugreifen, deaktivieren Sie das Feld in der Bynder-App-Konfiguration. Dadurch wird der Editor auf die Standard-JSON-Anzeige für Objektfelder zurückgesetzt.

Wie greife ich auf die URL des ursprünglichen Assets zu?

Die Verfügbarkeit der URL des ursprünglichen Assets in der JSON-Nutzlast hängt davon ab, ob ein Asset im Bynder-Portal veröffentlicht wird. Um ein Asset öffentlich zu machen, müssen Sie in Ihrem Bynder-Portal zum Abschnitt „Bearbeiten“ gehen und dann unter Erweiterte Rechte die Option Als öffentlich markieren auswählen. Sobald die Einstellung gespeichert ist, enthält die JSON-Nutzlast die Originaleigenschaft, die auf ein unverändertes Asset verweist.

Ich sehe ein seltsames Verhalten, wenn ich von Einzel- auf Mehrfachauswahl (oder umgekehrt) umschalte!

Wenn Sie in der Bynder-App-Definition Einzelauswahl oder Mehrfachauswahl auswählen, kann es zu einem unvorhersehbaren Verhalten kommen, wenn Sie diese Auswahl später ändern. Die Option Einzelauswahl bietet einen zusätzlichen Parameter für die von Ihnen ausgewählten Bilder (selectedFile), der bei der Mehrfachauswahl nicht verfügbar ist. Wenn Sie sich für einen Teil Ihrer Website auf diesen Parameter verlassen, werden Sie bei vorhandenen Einträgen ein unvorhersehbares Verhalten feststellen, wenn Sie die Auswahl ändern.

Wir empfehlen, entweder die Einzel- oder die Mehrfachauswahl zu wählen und ausschließlich diese Option zu verwenden.

Wie sehe ich zusätzliche Details zu den ausgewählten Assets?

Sie können Vorschauen ausgewählter Assets im Bynder-Feld-Editor anzeigen. Sie können auch auf „Weitere Details“ klicken, um den Namen und die ID des Assets anzuzeigen. Zusätzliche Daten für jedes Asset werden in JSON im Feld gespeichert und können über unsere APIs abgerufen werden.