#Blazor Integration

Pixault provides a native Blazor component library (Pixault.Blazor) with interactive gallery, uploader, image detail, and transform manager components. These work with both Blazor Server and Blazor WebAssembly.

Source on GitHub

#Installation

dotnet add package Pixault.Blazor
dotnet add package Pixault.Client
                              

#Setup

Register Pixault services in Program.cs:

builder.Services.AddPixault(options =>
{
    options.BaseUrl = "https://img.pixault.io";
    options.DefaultProject = "myapp";
    options.ClientId = "px_cl_your_client_id";
    options.ClientSecret = "pk_your_secret_key";
});
                              

#Components

#PixaultGallery

A searchable, filterable image gallery with pagination and selection:

<PixaultGallery Project="myapp"
                OnImageSelected="HandleImageSelected" />
@code {
    private void HandleImageSelected(ImageMetadataDto image)
    {
        // Handle selection — show detail view, etc.
    }
}
                              

Features:

• Grid layout with responsive columns

• Search by alt text and tags

• Tag filtering

• Cursor-based pagination

• Click to select

#PixaultUploader

Drag-and-drop multi-file uploader with progress tracking:

<PixaultUploader Project="myapp"
                 OnUploadComplete="HandleUploadComplete" />
@code {
    private void HandleUploadComplete(UploadCompleteEventArgs args)
    {
        // args.ImageId — the uploaded image ID
        // args.Url — the original image URL
    }
}
                              

Features:

• Drag-and-drop zone

• Multi-file support

• Real-time progress bars

• Alt text and tag input per file

• Automatic format detection

#PixaultImageDetail

Display and edit image metadata:

<PixaultImageDetail Project="myapp"
                    Image="@selectedImage"
                    OnDeleted="HandleDeleted"
                    OnUpdated="HandleUpdated" />
@code {
    private ImageMetadataDto? selectedImage;
    private void HandleDeleted()
    {
        selectedImage = null;
    }
    private void HandleUpdated(ImageMetadataDto updated)
    {
        selectedImage = updated;
    }
}
                              

Features:

• Image preview with responsive sizing

• Metadata fields (alt, title, tags) with inline editing

• Copy URL buttons for common transforms

• Delete with confirmation

• Video playback support

#PixaultTransformManager

CRUD interface for named transforms — including watermark presets:

<PixaultTransformManager Project="myapp" />
                              

Features:

• List all named transforms with watermark info

• Create/edit transforms with width, height, fit mode, quality, blur

• Watermark picker — dropdown populated from project watermarks

• Watermark position & opacity controls

• Save watermark settings into named transforms (the Pixault server enforces them on every URL using the preset)

• Delete transforms

The watermark dropdown is populated by ListWatermarksAsync() when the component loads. Upload watermarks to your project first using PixaultAdminClient.UploadWatermarkAsync() (or via the API directly) — they'll appear in the picker automatically.

#PixaultImageInsert

Image picker with live transform preview, including watermark controls:

<PixaultImageInsert Project="myapp" OnInsert="HandleInsert" />
@code {
    private void HandleInsert(string url)
    {
        // url contains the fully-built transform URL with watermark applied
    }
}
                              

Watermark controls:

• Watermark dropdown (auto-populated from project watermarks)

• Position dropdown (TL/TR/BL/BR/Center/Tile)

• Opacity slider (1–100%)

• Live preview reflects watermark in real time

#Full Dashboard Example

Combine components into a complete image management dashboard:

@page "/media"
<div style="display: flex; gap: 1.5rem;">
    <div style="flex: 1;">
        <PixaultGallery Project="myapp" OnImageSelected="OnSelect" />
    </div>
    @if (_selected is not null)
    {
        <div style="width: 380px;">
            <PixaultImageDetail Project="myapp"
                                Image="_selected"
                                OnDeleted="OnDelete"
                                OnUpdated="OnUpdate" />
        </div>
    }
</div>
@code {
    private ImageMetadataDto? _selected;
    private void OnSelect(ImageMetadataDto image) => _selected = image;
    private void OnDelete() => _selected = null;
    private void OnUpdate(ImageMetadataDto updated) => _selected = updated;
}
                              

#Responsive Image Tag Helper

Build responsive <img> tags with srcset:

@inject PixaultImageService ImageService
@{
    var srcset = string.Join(", ",
        new[] { 400, 800, 1200 }.Select(w =>
            $"{ImageService.For(imageId).Width(w).Format("webp").Build()} {w}w"));
}
<img src="@ImageService.For(imageId).Width(800).Format("webp").Build()"
     srcset="@srcset"
     sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
     alt="@image.Alt"
     loading="lazy" />
                              

imageId here can be either a legacy imageId or a publicId — .For(...) emits the right URL grammar for each. The builder also has .ToImgTag(alt, widths, sizes) and .ToPictureTag(...) helpers that generate the responsive markup for you.

@* Equivalent, using the built-in helper: *@
@((MarkupString)ImageService.For(imageId).ToImgTag(image.Alt, new[] { 400, 800, 1200 }))
                              

#Oqtane Module

Since Oqtane is built on Blazor, Pixault components integrate natively as an Oqtane module. See the CMS Integration Guide for module configuration details.