Rendering Assets

Rendering always uses a public output or derivative URL, never the raw original file, which isn't guaranteed to be publicly accessible.

Razor (MVC)

Asset Picker

@using Uxbee.Umbraco.Bynder.Helpers
@using Uxbee.Umbraco.Bynder.Models
 
@Html.RenderBynderAsset(Model.Value<BynderAsset>("heroImage"), derivative: "webImage", cssClass: "hero")

For a VIDEO asset, the rendering helpers add controlsList="nodownload" to the <video> tag by default. Pass allowDownload: true to show the browser's download option.

File Picker

The File Picker resolves to BynderOrMediaFile, whether the editor picked a Bynder asset or a fallback Umbraco Media item. When the file is an image, it resolves to BynderOrMediaImage, which adds Width, Height and Alt:

@{
    var image = Model.Value<BynderOrMediaFile>("printImage") as BynderOrMediaImage;
}
@if (!string.IsNullOrWhiteSpace(image?.Url()))
{
    <img src="@image.Url()" alt="@image.Alt" width="@image.Width" height="@image.Height" loading="lazy" />
}

Or use the helper:

@Html.RenderBynderOrMediaFile(Model.Value<BynderOrMediaFile>("printImage"), cssClass: "print-image")

Read any mapped metadata field by alias, for example image.Value<string>("copyright").

Properties with an Umbraco Media fallback

If a property also uses the Fallback Media Picker, read it as BynderOrMediaAsset or BynderOrMediaFile. Url() and Alt work the same way for both sources, and Source tells you which one was picked ("bynder" or "media").

For video or audio, check CanEmbedPlayer before you embed a player. It's only true for a Bynder asset that is Public in Bynder:

@{
    var audio = Model.Value<BynderOrMediaAsset>("backgroundAudio");
}
@if (!string.IsNullOrWhiteSpace(audio?.Url()) && audio.CanEmbedPlayer)
{
    <audio controls src="@audio.Url()"></audio>
}

Subtitles

With Transcript Sync on, ResolveSubtitle returns the subtitle track to use. A subtitle file the editor picked explicitly always wins over the synced one:

@{
    var video = Model.Value<BynderOrMediaFile>("video");
    var explicitSubtitle = Model.Value<BynderOrMediaFile>("subtitleFile");
    var subtitle = video?.ResolveSubtitle(explicitSubtitle);
}
<video controls src="@video?.Url()">
    @if (subtitle is not null)
    {
        <track kind="subtitles" src="@subtitle.Value.Url" srclang="@subtitle.Value.LanguageCode" label="@subtitle.Value.LanguageLabel" default />
    }
</video>

Headless (Content Delivery API)

Both pickers support Umbraco's Content Delivery API (opens in a new tab). A property returns the standard IApiMedia shape, whether the editor picked a Bynder asset or an Umbraco Media item:

{
  "url": "https://yourcompany.getbynder.com/m/1a2b3c4d5e6f7a8b/webimage-hero.jpg",
  "width": 1920,
  "height": 1080,
  "bytes": 245760,
  "properties": {
    "alt": "Team at work in the office"
  }
}

• Alt text is always in properties.alt.
• For the Asset Picker, width, height and bytes are null, because it resolves a named derivative, not one specific file. The File Picker returns the dimensions of the picked output.