Import Page Images
A per-field import button that scans other image fields on the same page and intelligently matches against the MediaHub library, with deduplication, perceptual hashing, and confidence badges.
What it does
When Import from page images is enabled on a MediaHub field, an Import page images button appears next to the Choose button in the page editor.
This feature is designed for gradual rollouts when you're adding MediaHub fields to templates that already have standard image fields. Rather than hunting through the library picker to find images that are already visible on the page, one click opens a modal that scans the other image fields on that specific page.
The button only appears when the page has other image fields that contain images. There's no dead UI on pages where there's nothing to import.
Enabling it
- Open the MediaHub field in Setup → Fields
- Go to the Input tab → Media Hub Picker Settings
- Enable Import from page images
- Save
How matching works
When the import modal opens, each source image is compared against every asset in the Hub using four independent signals:
| Signal | Description |
|---|---|
| Filename stem | Baseline check: same filename without extension |
| File size | Exact byte count comparison |
| Dimensions | Width and height comparison |
| Perceptual hash (dHash) | A 64-bit visual fingerprint (see below) |
Perceptual hashing
The perceptual hash (dHash) is computed by resizing the image to 9×8 pixels, converting to grayscale, and comparing adjacent pixel brightness to produce a 64-bit fingerprint.
Two images with a Hamming distance ≤ 5 are considered visually identical, even across different filenames, compression levels, or re-saves. This catches the common case where IMG_4523.jpg on a page is the same photo as office-team.jpg in the Hub.
The system uses ProcessWire's existing 64×64 thumbnails for dHash computation; no extra dependencies or large memory loads.
Confidence badges
Rather than a binary match/no-match, each image gets a confidence label based on how many signals agree:
| Badge | Meaning | Basis |
|---|---|---|
| In Hub | Almost certainly the same image | Stem + filesize + dimensions, or stem + dHash match |
| Likely in Hub | Very probably the same image | Stem + one secondary signal, or different filename but dHash ≤ 5 |
| Possibly in Hub | Same filename but different image | Stem matches; size, dimensions, and visual content all differ |
| New | Not found in the Hub | No stem match and no visual similarity |
| In this field | Already referenced | The Hub asset is already selected in this field |
What happens on import
When you select images and click Import:
- If the image is already in the Hub (confirmed by at least one secondary signal beyond filename): a reference to the existing asset is added to the field; no duplicate file is created.
- If the image is new (or confidence is too low): the image is copied into the Hub as a new asset.
During import, metadata is carried over:
- The original image's description becomes the asset's alt text
- Any PW image tags are converted to Hub tags
- The source page and field are recorded in the asset's About field as an audit trail
Use case: gradual migration
This feature shines when you're incrementally migrating a site from native ProcessWire image fields to MediaHub:
- Add MediaHub fields to your templates alongside existing image fields
- When editing a page, use "Import page images" to pull in the existing images
- The matching logic avoids duplicates: images already in the Hub are referenced, not re-uploaded
- Once migrated, remove the old image fields from the template
This approach is gentler than a bulk migration because it lets editors verify each page as they go, rather than flipping the entire site at once.