@getdammy/client

Client-SDK voor de DAM — de single source of truth voor beelden. Het CMS/de website bewaart nooit een bestand, alleen een referentie (assetId). De DAM serveert het beeld met focal point server-side erin, op een stabiele URL die altijd de laatste versie geeft.

npm install @getdammy/client

Configuratie (optioneel)

Default wijst naar productie. Override voor staging/self-host:

import { configureDam } from "@getdammy/client";
configureDam({ origin: "https://dam-staging.example", cdnOrigin: "https://cdn.dam-staging.example" });

Core (@getdammy/client) — geen dependencies

import { openDamPicker, damImageUrl, resolveDamRef } from "@getdammy/client";

// Picker openen (browser), referentie terugkrijgen:
const ref = await openDamPicker({ presets: ["hd", "medium"] });
// → { assetId, alt, width, height, focalX, focalY, urls, url, srcset, preset,
//     crop, variant, blurHash, imageVersion, cdn? }
// Bewaar de hele ref in je CMS — dat is je snapshot.

// Stabiele preset-URL bouwen (klassieke route, werkt voor elke ref):
damImageUrl(assetId, "hd"); // → {DAM}/api/images/hd/{assetId}

// CDN-levering (parametrisch, versiestempel in de URL) — null zonder imageVersion:
damCdnUrl(ref, { w: 640 });                  // → https://cdn…/{id}?w=640&v=…
damCdnUrl(ref, { w: 640, ar: "1:1", dpr: 2 }); // + focuspunt als g=…
damCdnSrcSet(ref, { maxWidth: ref.width });  // "… 80w, … 160w, …" tot de bronbreedte
damRefImageUrl(ref, "medium");               // CDN als het kan, anders de preset-route

// Huidige metadata + beschikbaarheid (SSR/fallback):
const meta = await resolveDamRef(assetId);

React (@getdammy/client/react)

De website kiest de preset per slot; de redacteur niet.

import { DamImage } from "@getdammy/client/react";

<DamImage asset={value} slot="hero" />            // CDN-ladder als de ref dat kan
<DamImage assetId={value.assetId} alt={value.alt} slot="card" /> // klassieke preset-route

Payload-veld (kopieerbaar, niet in de package)

Het admin-veld zit bewust niet in deze package: het hangt aan de exacte @payloadcms/ui-versie van je project en draait in je admin-bundle. Lever het als kopieerbaar component dat je tegen je eigen Payload-versie onderhoudt — het gebruikt gewoon de core hierboven (openDamPicker, damImageUrl). Zie DamAssetField.tsx in de DAM-integratiegids/voorbeelden.

Hoe het werkt

• Presets (globaal, raadbaar): hd 1920 · large 1440 · medium 800 · small 400. URL: {DAM}/api/images/{preset}/{assetId}.
• Focal point zit server-side in de bijsnijdende presets.
• Verversen is automatisch: zelfde URL, de DAM purged z'n cache bij elke wijziging (+ ETag-revalidatie). Geen re-save/cache-legen.
• Resilient: gecachete beelden blijven serveren als de DAM hapert (stale-if-error); render hangt niet aan een live DAM-aanroep.

Volledige API: zie de DAM-integratiegids.