Such-Komponenten einbinden

Binde die footage.one Suche als Web Components in deine Website ein.

Überblick

footage.one stellt Web Components bereit, mit denen du eine Mediensuche direkt in deine eigene Website einbinden kannst. Die Komponenten verbinden sich mit deinem footage.one-Account und zeigen die Medien einer Distribution an.

Zum Ausprobieren vor der Integration: Auf https://ork.footage.one/demo den Token einer Distribution vom Typ „Öffentliche Suche" einfügen — die Suche läuft dann gegen die eigenen Daten.

Einbindung

Lade das Script in deine HTML-Seite:

<script src="https://ork.footage.one/asset-search/main.js"></script>

Konfiguration

Konfiguriere die Verbindung zu deinem footage.one-Account. Du benötigst den Host und einen JWT-Token. Den Token erhältst du, indem du eine Distribution vom Typ „Öffentliche Suche" erstellst — der JWT-Token wird in den Distributionseinstellungen angezeigt.

Per HTML-Element

<foc-config host="https://ork.footage.one" token="dein-jwt-token" language="de"></foc-config>

Per JavaScript

FoComponents.configure('https://ork.footage.one', 'dein-jwt-token', 'de');

Verfügbare Komponenten

foc-result — Suchergebnisse

Zeigt die aktuelle Ergebnisliste an:

<foc-result link-format="/detail/%SKU%/%SLUG%"></foc-result>

Das link-format definiert das URL-Muster für Detailseiten. Verfügbare Platzhalter:

Platzhalter	Wert
`%SKU%`	Die SKU des Assets, wenn sie die kanonische Form hat — drei Buchstaben gefolgt von Ziffern — sonst die UID
`%SLUG%`	Der beschreibende URL-Slug in der Sprache der Anfrage, vom Backend geliefert
`%UID%`	Die interne UID des Assets

Der Slug ist beschreibend, nicht eindeutig und nicht dauerhaft. Er wird aus dem Asset-Namen in der Sprache der Anfrage gebildet. Er ändert sich also mit der Sprache und bei jeder Umbenennung, und verschiedene Namen ergeben denselben Slug. Identifiziere ein Asset deshalb immer über %SKU% oder %UID%: /detail/%SLUG% allein führt zu Kollisionen. Deine Detailseite lädt das Asset über die SKU und akzeptiert einen abweichenden Slug oder leitet auf den aktuellen um.

Nutze %SLUG%, statt selbst einen Slug zu bilden. Dann passen Ergebnisliste und Detailseite in derselben Sprache zusammen. Bildet eine Integration ihren eigenen Slug, entstehen für dasselbe Asset unterschiedliche URLs.

Detail-Overlay statt Seitenwechsel

Standardmäßig folgt ein Klick auf eine Kachel ihrem href. Soll stattdessen ein Overlay geöffnet werden, setze link-navigate="false":

<foc-result link-format="/detail/%SKU%/%SLUG%" link-navigate="false"></foc-result>

Die Kachel behält dann ihren echten href im Markup, der Klick wird aber abgefangen und nur das foc:item-click-Event ausgelöst. Strg-/Cmd-/Shift-/Alt-Klick bleiben unangetastet — „in neuem Tab öffnen“ und „Link speichern unter“ funktionieren weiterhin.

Auf dieses Event reagierst du, um dein Overlay zu öffnen. Beachte: Das Asset liegt auf event.data, nicht auf event.detail:

document.addEventListener('foc:item-click', (event) => {
  openOverlay(event.data); // das vollständige Asset: uid, sku, slug, name, thumbnailUrl, …
});

Setze niemals link-format="javascript:void(0)". Das war früher der einzige Weg zu einem Overlay, hinterlässt aber eine Ergebnisliste ohne einen einzigen folgbaren Link — Suchmaschinen finden dann keines deiner Assets. link-navigate="false" löst dasselbe Problem, ohne die Links zu opfern.

foc-details — Asset-Detailansicht

Zeigt ein einzelnes Asset an. Ohne sku-Attribut wird die SKU aus dem URL-Parameter sku gelesen:

<foc-details sku="DWT000342"></foc-details>

Zeigt verfügbare Filteroptionen (Facetten) an:

<foc-facets format-counter sort-by-label="codec_norm_s,resolution_ss"></foc-facets>

Zeigt die aktuell aktiven Filter mit Möglichkeit zur Entfernung:

<foc-active-facets></foc-active-facets>

foc-pagination — Seitennavigation

<foc-pagination>
  <span slot="first">Erste</span>
  <span slot="previous">Zurück</span>
  <span slot="next">Weiter</span>
  <span slot="last">Letzte</span>
</foc-pagination>

foc-pagesize — Ergebnisse pro Seite

<foc-pagesize sizes="8,16,32,64" default-size="16"></foc-pagesize>

foc-result-count — Ergebnisanzahl

<foc-result-count format>
  <span slot="before-count">Insgesamt </span>
  <span slot="after-count"> Ergebnisse</span>
  <span slot="no-result">Keine Ergebnisse gefunden</span>
</foc-result-count>

foc-asset-keywords — Asset-Keywords

Zeigt Keywords für ein Asset an (muss innerhalb von foc-details stehen):

<foc-details sku="DWT000342">
  <foc-asset-keywords mode="keywords"></foc-asset-keywords>
</foc-details>

Modi: keywords, parentKeyword, freewords.

foc-asset-image — Asset-Bild

<foc-asset-image sku="DWT000342"></foc-asset-image>

JavaScript API

Konfiguration kann zur Laufzeit geändert werden:

FoComponents.changeToken('neuer-token');
FoComponents.changeHost('https://anderer-host.footage.one');
FoComponents.changeLanguage('en');
FoComponents.addFilter('aspect_norm_s', '16x9');
FoComponents.removeFilter('aspect_norm_s', '16x9');

Events

Alle Events lassen sich auf document abhören. Ihre Nutzdaten liegen auf event.data, nicht auf event.detail:

Event	Beschreibung
`foc:result`	Aktuelle Ergebnisliste
`foc:result-count`	Anzahl der Ergebnisse
`foc:facet-add`	Ein Filter wurde hinzugefügt
`foc:facet-remove`	Ein Filter wurde entfernt
`foc:facet-changed`	Liste der aktiven Filter
`foc:search-start`	Suche gestartet
`foc:search-end`	Suche abgeschlossen
`foc:item-click`	Eine Ergebniskachel wurde geklickt (Daten: das Asset)

Teams Übersicht