MediaHub 1.11: non-image assets and Insert Link integration

MediaHub has supported uploading PDFs, videos, and other non-image files since 1.9. With 1.11, non-image files become first-class citizens across the entire UI: the TinyMCE picker, the Inputfield, the library, and a new integration with ProcessWire's Insert Link dialog.

The TinyMCE picker shows all file types

The MediaHub picker opened from the TinyMCE toolbar was originally scoped to images only, which made sense when the module only dealt with images. Now that the library holds all file types, the picker shows everything. The type filter dropdown is still there if you want to narrow things down, but the default is "all types".

When you select an asset, MediaHub looks at the MIME type and inserts the right HTML for it. Images get an <img> tag as before. Videos get <video controls>. Audio files get <audio controls>. Documents like PDFs get an <a> download link using the asset's title as the link text. All of these carry the data-mediahub-id attribute, so if you rename the asset later, the URLs update automatically.

The confirm button at the bottom of the picker also adapts. It reads "Insert image", "Insert video", "Insert audio", or "Insert link" depending on what you've selected, so there's no ambiguity about what's going to happen when you click it.

Link highlighted text to a MediaHub asset

A common workflow with non-image files: you have a PDF in your library and some text in a TinyMCE field that should link to it. The natural thing to do is highlight the text and click Insert Link. Until now, Insert Link had no awareness of MediaHub, so you'd need to browse the page tree to find the asset page manually.

There are now two improvements to the Insert Link dialog.

First, if the page you're editing has a MediaHub field with assets already selected, those files appear in the Select File dropdown automatically. They show up as "Media File: filename.ext" so you can tell them apart from files attached to other fields on the page.

Second, there's a new "Select from Media Hub" section in the dialog. Click the button and it opens the full MediaHub picker. Choose any asset in the library and the file URL is inserted into the Link to URL field. This works for any file type: PDFs, images, videos, spreadsheets, whatever you've uploaded.

Between these two additions, linking to a MediaHub asset is now as straightforward as linking to any other file in ProcessWire.

Non-image files display properly in fields

The Inputfield was built around image thumbnails, which meant non-image assets were shown as generic icons inside thumbnail-shaped cards. That's fine as a starting point, but it doesn't give editors much to work with when they're looking at a list of PDFs and spreadsheets.

Non-image assets now render as compact detail cards: a file-type icon, the title, the filename, and type/size badges. This layout is consistent regardless of which view mode you've chosen for the field. The size slider only affects images, which is the only context where it's useful. The edit and remove overlay buttons work the same way as they do on image cards.

The offcanvas edit panel also now shows a file-type icon for non-image assets instead of an empty image placeholder.

Non-image tiles in the library

The library view has had a similar update. An image thumbnail carries its own context, but a file-type icon for a PDF doesn't tell you much on its own. Non-image tiles now always display their title, filename, and type/size badges regardless of the Details toggle state. Images still respond to the toggle as before.

The "Images" container is now "Assets"

The hidden page in the ProcessWire tree that holds all MediaHub assets was named "Images" because that's all the module handled when it was first built. Now that it handles every file type, the page has been renamed to "Assets". Both the page name (the URL segment) and the title are updated on upgrade. The template name pkd-mediahub-images stays the same to avoid breaking any existing selectors in your template code.

If you've been using MediaHub for a while and have references to /pkd-mediahub/images/, that path is now /pkd-mediahub/assets/. The module's getAssetsParent() method checks both names, so your existing code will continue to work without changes.

Version format change

One technical note: module versions in getModuleInfo() now use semver strings ('1.11.0') instead of integers (1110). This avoids a ProcessWire quirk where multi-digit version segments get misinterpreted (the integer 1110 was displaying as "1.1.10" in the module info screen). The upgrade method handles both old and new version formats automatically.

Download

MediaHub 1.11 is available from the downloads page. The full list of changes is in the changelog.