Show assets on your site

The API returns the field as a plain string. Use it directly:

{
  "data": {
    "title": "Our new campaign",
    "cover": "https://your-company.getbynder.com/transform/<asset-id>/campaign-hero"
  }
}

<img src={entry.cover} alt={entry.coverAlt} />

Resize on delivery

Bynder can resize and convert an image when it is requested, from the same asset. A transform URL looks like this:

https://your-company.getbynder.com/transform/<asset-id>/<name>?io=transform:fit,width:800&format=webp

Wrap this in two small helpers and build a srcset from them, so a phone downloads a small file and a wide screen a larger one:

const BYNDER_TRANSFORM = /^(https?:\/\/[^/]+\/transform\/[0-9a-f-]{36}\/[^/?#]+)(?:\?(.*))?$/i;

export const bynderSized = (url: string, width: number) => {
  const m = url.match(BYNDER_TRANSFORM);
  return m ? `${m[1]}?io=transform:fit,width:${width}&format=webp` : url;
};

export const bynderSrcset = (url: string, widths = [480, 800, 1200, 1600]) =>
  BYNDER_TRANSFORM.test(url) ? widths.map((w) => `${bynderSized(url, w)} ${w}w`).join(', ') : undefined;

<img
  src={bynderSized(entry.cover, 1200)}
  srcset={bynderSrcset(entry.cover)}
  sizes="(min-width: 960px) 960px, 100vw"
  alt={entry.coverAlt}
/>

The transform options (fit, width, format, and others) are Bynder’s. Check your portal’s documentation for what it supports.

Several assets

A field that allows several assets returns a list of { url, name, alt } from the public API. (A field that held one URL before it allowed several can still return that URL as a string, so handle both.) Render each image with the same sized helpers, and give every image its own alt:

<ul class="gallery">
  {entry.images.map((image) => (
    <li>
      <img
        src={bynderSized(image.url, 800)}
        srcset={bynderSrcset(image.url)}
        sizes="(min-width: 960px) 33vw, 100vw"
        alt={image.alt ?? image.name ?? ''}
        loading="lazy"
      />
    </li>
  ))}
</ul>

For a lightbox, ask Bynder for a larger rendition of the same asset when an image is opened, for example bynderSized(image.url, 1800). Read the field as a plain JSON attribute: it needs no populate.

Video and audio

Use the stored URL as the src of a player:

<video controls preload="metadata" src="{entry.video}"></video>
<audio controls src="{entry.audio}"></audio>

For a video poster, Bynder serves a preview image of the same asset. You can derive its address from the video URL: /asset/<id>/original/<name> becomes /asset/<id>/thumbnail/webimage-<name>.