Oqtane Integration
Pixault provides a native Oqtane module that brings full image management, CDN delivery, and plugin marketplace features into your Oqtane site. Since Oqtane is built on Blazor, the module reuses the Pixault.Blazor component library directly — no JavaScript bridges needed.
Installation
Download the
Pixault.Modulepackage from the Oqtane Marketplace or install from NuGetIn your Oqtane admin panel, go to Modules → Install Module
Upload the module package
Add the Pixault Image CDN module to any page
Configuration
After adding the module to a page, open the module settings:
Setting | Description | Default |
|---|---|---|
API Base URL | Pixault API endpoint |
|
API Key | Your Pixault API key (stored encrypted) | — |
Project ID | Your Pixault project identifier |
|
Default Width | Default resize width (blank = original) | — |
Default Height | Default resize height (blank = original) | — |
Default Quality | JPEG/WebP quality (blank = server default 80) | — |
Default Format | Output format: |
|
Enable Theme Optimization | Rewrite | Off |
HMAC Secret | Secret for signed URL generation | — |
Connection Test
After entering your API key and project, use the Test Connection button to verify connectivity to the Pixault API before saving.
Module Features
The module provides four tabs:
Gallery
Browse and manage images stored in Pixault. Select any image to view its full metadata, edit Schema.org fields, or delete it.
Upload
Drag-and-drop file upload with progress tracking. Uploaded files go directly to Pixault via the upload API. After upload completes, the view switches to the Gallery tab.
Transforms
Manage named transform presets for your project. Create presets like thumbnail, gallery, or hero with locked parameters to enforce consistent sizing across your site.
Plugins
Browse the Pixault plugin marketplace and activate plugins for your project. Manage background removal, smart crop, image filters, and watermark templates directly from the module.
Theme-Level Image Optimization
When Enable Theme Optimization is turned on, the module injects a JavaScript module (Module.js) that rewrites all <img> tags on the page to serve images through Pixault CDN with your default transforms applied.
This works at the theme level, so all images on the page — including those from other modules — are optimized without any code changes.
Multi-Instance Support
Each module instance on your site can connect to a different Pixault project with its own API key and default transforms. This is useful for:
Multi-brand sites — Different projects for different sections
Client sites — Separate image storage per client
Staging vs production — Different API keys per environment
Architecture
The module consists of:
Component | Description |
|---|---|
| Oqtane module metadata and registration |
| DI registration for Pixault SDK and Blazor components |
| Server-side service implementing |
| Settings persistence using Oqtane's encrypted settings store |
| Main module UI with tabbed navigation |
| Image detail view with metadata editing |
| Module settings panel ( |
| Client-side theme optimization script |
| Database migration for settings table |
Blazor Components Used
The module embeds these Pixault.Blazor components:
PixaultGallery — Image browser with search, filter, and pagination
PixaultUploader — Drag-and-drop multi-file upload with progress
PixaultImageDetail — Metadata viewer and editor
PixaultTransformManager — Named transform CRUD
PixaultPluginMarketplace — Plugin marketplace browser and activation
See the Blazor Integration Guide for detailed component documentation.
Requirements
Oqtane 5.0+
.NET 10
A Pixault account with an active subscription