Tutorial: Banner Creation — Blazor

IsabyteImageEditor handles both single-image editing and banner-template authoring via one parameter; IsabyteBannerProducer is the separate customer-facing production tool. Package: Isabyte.PowerTools.Blazor.

Step 1 — Switch the Editor to Banner Mode (image-editor)

@using Isabyte.PowerTools.Components.Tools

<IsabyteImageEditor EditorMode="EditorMode.BannerEditor"
                BannerTemplateFormatsMode="BannerFormatsMode.AddToDefaults"
                Height="85vh"
                EnableSave="true"
                EnableLoad="true" />

With EditorMode.BannerEditor set, the "New Image" dialog becomes "New Banner Template" (pick multiple sizes up front), Save writes .isat instead of .isai, and every file-picker label switches from "image" to "banner template".

Step 2 — Mark Editable Fields

Anything the customer should later change must be marked editable in the layer's property panel: text (the string, optionally a font-size range), image (the source), and color swatch (the fill). Everything else — backgrounds, locked typography — stays exactly as designed.

Step 3 — Ship the .isat to the Customer Site

Two common approaches: a static file in wwwroot/banners/ for a single campaign, or DB-stored varbinary(max) bytes (stream, don't load the whole row) for a multi-tenant library.

Step 4 — Wire IsabyteBannerProducer

@using Isabyte.PowerTools.Components.Tools
@inject ITemplateStore TemplateStore

<IsabyteBannerProducer TemplateData="@_templateBytes"
                   EnableAi="true"
                   EnableImageLibrary="true"
                   ShowDownloadButton="true"
                   ShowOrderButton="true"
                   OnExport="HandleExport"
                   OnOrder="HandleOrder" />

@code {
    private byte[]? _templateBytes;

    protected override async Task OnInitializedAsync()
        => _templateBytes = await TemplateStore.LoadAsync("spring-2026-campaign");

    private Task HandleOrder(BannerProducerOrderResult order)
    {
        // order.Banners has the finished banner bytes per format.
        return Task.CompletedTask;
    }
}

EnableAi, EnableImageLibrary, ShowDownloadButton and ShowOrderButton are independent feature flags. EnableAi and ShowDownloadButton are ON by default — switch them off if your flow should not offer them — while EnableImageLibrary and ShowOrderButton are off until you enable them.

Common Gotchas

• Don't expose EditorMode.BannerEditor to customers — it's the full design tool (layer ordering, locks). Pair it with IsabyteBannerProducer for the customer side; don't mix.
• OnExport and OnOrder both hand you finished banner bytes — from there it's plain server-side .NET: queue, upload, or write to disk.

Next

• Tutorial: Landing Pages & GDPR