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 kanonische URL-Slug, den das Backend liefert
%UID% Die interne UID des Assets

Der Slug ist beschreibend, nicht eindeutig. Er wird aus dem Asset-Namen gebildet, und verschiedene Namen ergeben denselben Slug. Kombiniere ihn immer mit %SKU% oder %UID% — /detail/%SLUG% allein führt zu Kollisionen.

Nutze %SLUG%, statt selbst einen Slug zu bilden. Der Slug kommt aus dem Backend und ist dieselbe Zeichenkette, die auch in der Sitemap steht. Bildet eine Integration ihren eigenen, ist dasselbe Asset unter mehreren URLs erreichbar — genau das wertet Google als Duplicate Content ab.

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>

foc-facets — Filter

Zeigt verfügbare Filteroptionen (Facetten) an:

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

foc-active-facets — Aktive Filter

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