Introducing MediaHub for ProcessWire

Why I built MediaHub

A client asked me if they could manage all their images from a single place in ProcessWire. See what's been uploaded, know where each image is used, and stop hunting through pages or their computer to find the right file.

ProcessWire gives you everything you need to build that. A settings page with shared images, page references to centralise assets, a custom admin process for browsing. That flexibility is one of ProcessWire's greatest strengths, and developers use it to solve exactly these kinds of problems every day. But each solution is bespoke, built from scratch and tailored to one project. It's rarely reusable on the next site without significant custom development.

I wanted to take that pattern and package it into a proper tool: built on ProcessWire's page architecture, using the selectors and API you already know, but ready to go without the upfront development work.

That's where MediaHub started. Tags, collections, usage tracking, crops that don't duplicate files, per-reference metadata. Each one came from a real requirement on a real project.

What MediaHub does

MediaHub adds a centralised media library to ProcessWire. Every asset you upload, whether that's images, PDFs, documents, audio, or video, lives in one place. Pages reference assets rather than owning copies of them. Change an image's alt text in the library and it updates everywhere that image appears.

It's built entirely on ProcessWire's own page architecture. Assets are pages. Tags are pages. Collections are pages. Everything is queryable with standard ProcessWire selectors. If you know how to use $pages->find(), you already know how to query MediaHub.

10 MediaHub highlights

1. Centralised media library — Upload an asset once. Reference it from any page, any template, any field. One file on disk, no matter how many pages use it.
2. Image cropping with presets — A built-in crop editor with nine presets (Square, 16:9, 4:5, 3:2, and more) plus custom presets you define yourself. Each crop is stored once in the library and reusable across every page.
3. Inline crop badges on fields — MediaHub fields show crop status badges directly on each image card in the page editor. Editors can see which crops exist, which are missing, and create new ones without leaving the page.
4. Usage tracking tables — Every asset detail page displays a usage table listing every ProcessWire page that references it, with direct edit and view links. No more guessing whether an image is safe to delete.
5. Global tags — Tag assets in the library for fast filtering and searching. Tags are ProcessWire pages, so they support the full selector API in your templates.
6. Collections with configurable labels — Organise assets into hierarchical collections. Rename the label to Folders, Albums, Galleries, or whatever fits your team. Assets can belong to multiple collections at once.
7. File renaming — Rename the underlying file directly from the asset detail page. All ProcessWire references stay linked automatically. No broken images, no manual cleanup.
8. Per-reference metadata — Override alt text and assign display tags on a per-page basis without changing the global asset. The same image can have different descriptions depending on where it appears.
9. Import tool with deduplication — A built-in import tool scans existing image fields across your site, matches against the MediaHub library using filename, dimensions, and perceptual hashing, and avoids creating duplicates.
10. Full ProcessWire image API — $asset->image() returns a standard Pageimage. Every native method works unchanged: size(), width(), srcset(), quality settings, all of it. Zero learning curve for existing ProcessWire developers.

One asset, used everywhere

Upload an image once to the MediaHub library. Reference it from any number of pages and templates using a familiar page reference field. No duplication, no version drift, no wasted disk space.

Update the asset's title or alt text in one place and every reference reflects the change immediately. For agencies managing client sites with shared logos, staff photos, and branding imagery, this alone saves hours of repetitive work.

Built-in image cropping

MediaHub includes a crop editor with nine built-in presets (Square, 16:9, 4:5, and more) plus support for custom presets you define in the module configuration.

The key difference from per-page cropping approaches: crops in MediaHub are stored once in the library as their own pages. If 20 pages need a square crop of the same image, that's one cropped file on disk, not 20. Each crop is a first-class ProcessWire page with its own ID, making it independently selectable and reusable across your entire site.

Inline crop badges on the page editor let content managers see at a glance which crops exist and create new ones without leaving the page they're editing.

Collections, tags, and organisation

Organise assets into hierarchical collections. You can call them Folders, Albums, or Galleries; the label is configurable to match how your team thinks about media. An asset can belong to multiple collections simultaneously.

Tags provide fast filtering in the library and are fully queryable in templates using ProcessWire selectors. For content managers, this means finding the right image takes seconds instead of scrolling through hundreds of thumbnails.

Usage tracking

Every asset detail page shows exactly which ProcessWire pages reference it, with direct links to edit or view each one. This answers the question editors always ask before deleting or replacing an image: "Is this used anywhere else?"

Before removing or replacing an asset, the usage table shows you exactly where it's referenced. No guessing, no broken images on pages you forgot about.

Per-reference metadata

Sometimes the same image needs different context depending on where it appears. MediaHub supports per-reference description overrides and field-level display tags, so you can tailor how an asset is described on each page without touching the global metadata.

The global alt text remains the default. Per-page overrides layer on top only when needed.

The developer experience

MediaHub uses ProcessWire's standard FieldtypePage with a custom inputfield. Adding a MediaHub field to a template follows the same workflow as adding any page reference field. The template API is minimal and deliberate:

// Get an asset from a MediaHub field
$asset = $page->hero_image;

// Output with the full ProcessWire image API
$image = $asset->image();
echo "<img src='{$image->width(800)->url}' alt='{$asset->altText()}'>";

// Responsive images work exactly as expected
echo $asset->image()->srcset('320w, 640w, 900w');

// Crops
$square = $asset->cropImage('square', 400);

Because $asset->image() returns a standard ProcessWire Pageimage, every native method works: size(), width(), height(), srcset(), quality settings, all of it. There is no proprietary image handling to learn. If you've built ProcessWire templates before, you'll be productive with MediaHub in minutes.

Extending ProcessWire, not replacing it

This is an important point. MediaHub is not a replacement for ProcessWire's image fields. It's a layer built on top of the same page architecture that ProcessWire developers already know and trust.

Your existing image fields, templates, and front-end code continue to work exactly as they do today. MediaHub adds a centralised option for teams and projects where shared, deduplicated, organised media management makes a real difference.

For a personal site with a handful of images, standard image fields are perfectly fine and will always be. For an agency managing a client site with staff photos, product shots, branding assets, and editorial content spread across dozens of templates, MediaHub removes a significant amount of repetitive work and keeps things consistent.

The migration path is gradual too. You can run MediaHub fields alongside existing image fields on the same template, porting pages one at a time. A built-in import tool scans your existing image fields and matches against the MediaHub library using filename, file size, dimensions, and perceptual hashing to avoid creating duplicates.

Who MediaHub is for

MediaHub is built for ProcessWire developers and the agencies and clients they support. If any of these sound familiar, it's worth a look:

• Editors uploading the same images to multiple pages and maintaining them separately
• Agencies managing sites with shared branding, photography, and document assets
• Developers building templates that need consistent image crops across pages
• Content teams needing to know where an image is used before making changes
• Sites where disk space and image consistency actually matter at scale

Availability

MediaHub is currently in advanced development with power users already testing it on production ProcessWire sites. Pricing is being finalised. If you're interested in an early preview or want to be part of the testing group, get in touch and I'll set you up.

You can find more details on the MediaHub product page or browse the full documentation.