[WIP] Media Hub - the centralised hub for your PW media

[Peter Knight]

Some updates to the MediaHub module

I've added an import tool that lets you pull in all the existing images on your ProcessWire site without having to re-upload anything manually.

If you've been running PW for a while before installing Media Hub, you'll probably have images spread across dozens of pages and fields, and doing that by hand is nobody's idea of a good time.

The new Import tab (v104) scans every image field on your site, shows you what's out there in a nice table with thumbnails, dimensions, file sizes, which page and field each image belongs to, and crucially flags potential duplicates. So you can spot that the same hero image has been uploaded to 12 different pages and just import one copy.

You can filter by field, template, or search by name, then select what you want and batch import the lot with a progress bar.

There's also an Import by URL option if you've got images sitting on your server or hosted elsewhere that you want to bring in directly.

Nothing groundbreaking, just one of those quality-of-life things that makes the difference between a module people install and a module people actually use.

[Peter Knight]

MediaHub update....

TL;DR:

• MediaHub fields can now detect and import images used on the same page.
• A per-field import button scans other image fields on the same page and intelligently matches against the MediaHub library.
• It includes deduplication, perceptual hashing, and confidence badges.
• This saves significant manual effort when transitioning from standard image fields to MediaHub fields — i.e., you can run both in tandem while evaluating, or until you're ready to switch.

 

I made the jump from building MediaHub to implementing it on a real client site. I ran into issues, and those pain points led to new features. It's a different experience switching from testing with Instagram images to deploying on a 15+-year-old client ProcessWire site — a significant commercial site that can't afford downtime. It features blog posts, staff photos, services, and the usual content you'd expect on a professional services site. Having more on the line meant I approached it with greater scrutiny, taking things slowly — up to a point.

My approach:

1. Add a MediaHub field on every page beneath the existing images field.
2. Import each image individually (tedious, but reassuring).
3. Add a script that outputs the MediaHub image first, falling back to a standard image if the MH API had issues.
4. Apply data-type=mediahub to the HTML so I could quickly identify which images had yet to be ported.

Step 2 became tedious once I'd confirmed the core functionality was solid.

I already have a global import function that scans a site and imports existing images. But I wanted something different for this workflow. If I were an agency porting an entire site, what would be the most useful feature? How would I migrate one page at a time and confirm it was working, rather than relying on the global import? The answer was a localised import button on the MediaHub field itself.

Pressing the import button scans existing image fields on the same page and opens a modal containing a list of images available to add to both MediaHub and the MediaHub field. It doesn't yet support Matrix pages, though it works correctly within a Matrix field. The modal assesses whether each asset already exists in MediaHub. Avoiding duplicate images is a core principle of MediaHub, so getting this right mattered.

It handles most cases correctly. The one gap: images with different crops are treated as separate images — technically accurate, but better crop detection would be more useful in practice. That's next on the list.