[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.

[xportde]

Hello @Peter Knight, we’re really impressed with your work! We’re currently using Media Manager, but unfortunately it’s no longer being developed, so we’re urgently looking for a modern alternative. Media Hub could be the solution. As an agency, we’d also like to use it commercially – do you have any thoughts on this?

[szabesz]

6 hours ago, xportde said:

we’d also like to use it commercially – do you have any thoughts on this?

Lots of us are interested, I think. @Peter Knight any plans to release it?

[Peter Knight]

Hey @szabesz
Apologies - I had replied to people privately so you are probably thinking I am ignoring requests for info.
I'll DM you now.

[Peter Knight]

Latest updates.

I had somewhat foolishly left development of the RTE integration until late in the day. But this week I am almost done with TinyMCE integration and a custom button on the toolbar.

Initially I had planned on this flow

• user clicks the RTE media hub icon (insert image)
• A popup appears which displays images from the other fields on that page

im so conditioned to this pattern that I overlooked something obvious. Why display just the images on a page when Media Hub can display all images in your hub? 🧐 

Somehwhat unnecessarily, we’re asking clients to

1. add an image to a field(s)
2. Select insert image 
3. select image from step 1 again 

I’ll add a screenshot of the solution tomorrow. Would appreciate a second pair of eyeballs on this if anyone has time.

P

[Peter Knight]

Hey a UI/UX question if anyone wants to chip in. Does this make sense?

Rich Text Editors (normal flow)
You click the Add Image button in TinyMCE, and the Select image window opens.
You see a list of images associated with that page (only).

Rich Text Editors (with MediaHub)
With MediaHub, I'm no longer restricted to showing only the images attached to a page's fields.

But that raises a UX question: clients are used to seeing just a handful of images tied to the page they're editing.

Presenting hundreds of Library assets upfront and asking them to sort and filter isn't an improvement...if it's a sorting and filtering burden.

The better approach is two tabs?
On this page for the assets already attached to the current page, and MediaHub (or Library) for the full collection?

Or should I only display the entire library with the users' page images positioned at the top for convenience?

 

Cheers
P

[szabesz]

55 minutes ago, Peter Knight said:

On this page for the assets already attached to the current page, and MediaHub (or Library) for the full collection?

I prefer this one, along with the option to configure which source is shown by default (preferably the first tab is always the default, if possible).

A cleaner, more organized interface is better. If image sources are merged, even when page-context images are listed first, how can I tell the actual source? In some cases that does matter.

Avoiding confusion up front is the better solution, in my opinion.

[Peter Knight]

10 minutes ago, szabesz said:

I prefer this one, along with the option to configure which source is shown by default (preferably the first tab is always the default, if possible).

A cleaner, more organized interface is better. If image sources are merged, even when page-context images are listed first, how can I tell the actual source? In some cases that does matter.

Avoiding confusion up front is the better solution, in my opinion.

Thanks. Yep, I'm leaning that way too.
Also, making the user load all the images even with pagination, lazy loading and caching etc isn't ideal. 

[szabesz]

13 minutes ago, szabesz said:

option to configure which source is shown by default

I left out that I meant this option to be an individual field level setting, not a global one.

1 minute ago, Peter Knight said:

Thanks. Yep, I'm leaning that way too.

There are always pros and cons, but this solution also ensures that the default UX/UI of the admin is not changed too much, and if users use both interfaces (standard PW and MediaHub), then less deviation from what they are used to will generate less confusion.