#WordPress Integration

Pixault integrates with WordPress through a plugin that can operate in two modes: CDN mode (non-destructive URL rewriting) or Full mode (Pixault as primary storage).

#CDN Mode

CDN mode rewrites WordPress media URLs to serve images through Pixault transformations. Existing media stays in WordPress — Pixault acts as a processing and delivery layer.

#How It Works

Original: https://yoursite.com/wp-content/uploads/2025/photo.jpg
Rewritten: https://img.pixault.io/yoursite/img_abc/w_800,q_85.webp

WordPress's wp_get_attachment_url filter rewrites URLs at render time. Originals remain in the WordPress media library.

#Setup

  1. Install the Pixault plugin from the WordPress plugin directory

  2. Go to Settings → Pixault

  3. Enter your Client ID and Client Secret

  4. Set your Project name

  5. Select CDN Mode

  6. Save

#Configuration

Pixault API Key: pk_your_secret_key
Project: yoursite
Default Quality: 85
Default Format: webp
Enable Lazy Loading: Yes
Enable LQIP Placeholders: Yes

#Responsive Images

The plugin automatically generates srcset attributes using Pixault transforms:

<!-- Output -->
<img src="https://img.pixault.io/yoursite/img_abc/w_800,q_85.webp"
     srcset="https://img.pixault.io/yoursite/img_abc/w_400,q_85.webp 400w,
             https://img.pixault.io/yoursite/img_abc/w_800,q_85.webp 800w,
             https://img.pixault.io/yoursite/img_abc/w_1200,q_85.webp 1200w"
     sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 800px"
     loading="lazy"
     alt="Photo description" />

#LQIP Blur-Up

When enabled, the plugin embeds a tiny blurred placeholder inline:

<img src="https://img.pixault.io/yoursite/img_abc/w_800,q_85.webp"
     style="background-image: url(data:image/webp;base64,...); background-size: cover;"
     loading="lazy" />

#Full Mode

Full mode replaces the WordPress media upload flow. Images are uploaded directly to Pixault and served from the CDN. WordPress stores only a reference.

#Advantages Over CDN Mode

  • Reduced server storage — Originals stored in Pixault, not WordPress

  • Consistent metadata — Alt text, tags, and titles synced with Pixault

  • Advanced features — Watermarking, named transforms, signed URLs

#Setup

  1. Switch to Full Mode in Settings → Pixault

  2. New uploads go to Pixault automatically

  3. Existing media can be migrated with the bulk migration tool

#Bulk Migration

Settings → Pixault → Migrate Existing Media

The migration tool:

  1. Scans your WordPress media library

  2. Uploads each file to Pixault

  3. Updates database references to point to Pixault URLs

  4. Optionally removes local copies after verification

#Gutenberg Block

The plugin adds a Pixault Image Gutenberg block:

  • Image picker with Pixault gallery browser

  • Transform selector (choose from named transforms)

  • Alt text, caption, and link fields

  • Responsive breakpoint configuration

  • Live preview with selected transforms

#Named Transform Support

Map WordPress image sizes to Pixault named transforms:

thumbnail → t_thumb (200x200, cover crop)
medium    → t_medium (600px wide)
large     → t_large (1024px wide)
full      → original (no transformation)

Configure in Settings → Pixault → Image Size Mapping.

#WooCommerce Compatibility

The plugin integrates with WooCommerce product images:

  • Product gallery images served through Pixault

  • Zoom and lightbox support maintained

  • Variation images with automatic format optimization

#Requirements

  • WordPress 6.0+

  • PHP 8.1+

  • A Pixault account with an active subscription

  • The Pixault PHP SDK (bundled with the plugin)

#Oqtane Module

For .NET CMS integration, Pixault provides a native Oqtane module that reuses the Pixault.Blazor component library directly:

  • File manager integration for uploads

  • Theme-level image optimization

  • Module settings: API key, project, default transforms

  • Native Blazor components (no JavaScript bridge needed)

Since Oqtane is built on Blazor, see the Blazor Integration Guide for component details.