MediaHub 1.19.51: Expanding media types, German translation, and Front End Editing
YouTube and Vimeo as first-class library assets with full TinyMCE editing and start-at playback, inline audio and video preview, auto or manual preview covers for PDFs and audio, German admin UI, Front End Editing fixes, and KonKat theme polish.
Peter Knight
16 July 2026
Video content is a normal part of most sites now. Editors need to manage YouTube and Vimeo videos alongside images and documents, and they need the same workflow: import once, reference from anywhere, edit metadata in one place.
MediaHub 1.19.51 is the recommended release of the 1.19.5x cycle. The focus is on media assets beyond still images: external video in the library, preview and playback while you edit, visual covers for PDFs and audio, and polish from the 1.19.50 beta. This post walks through:
- YouTube and Vimeo as library assets
- YouTube and Vimeo in MediaHub fields
- Image captions in TinyMCE
- Inline audio and video preview
- Preview covers for PDFs, audio, and documents
- German admin UI
- Front-end editing (Beta)
and more (including credits)...
YouTube and Vimeo as library assets
I have always loved the simplicity of pasting a YouTube URL into a dedicated field and rendering it on the front end. It is an established, proven workflow, and for many sites it is all you need.
What I have always missed is video visibility at the editing stage: which video am I adding, is it the right one, can I see and play it before I save the field, and does it live in the library with picker access and usage tracking like everything else? That was a key goal for the 1.19.5x cycle: import YouTube and Vimeo as library items you can see, edit, and manage visually.
The workflow is simple: paste a YouTube or Vimeo URL into Import → By URL (watch links, Shorts, youtu.be, Vimeo, or a bare eleven-character YouTube ID). MediaHub creates an embed asset without downloading or storing the video file, essentially a virtual asset you can edit and manage like anything else in the library.
Import once and you get a thumbnail in the grid, a player on the asset detail page, inline playback in TinyMCE while you edit, and the same collections, labels, metadata, and usage tracking as other assets.
The same URL on a second import reuses the existing asset, so you do not get duplicates.
In the Media Hub library, embeded videos show a provider thumbnail from YouTube or Vimeo (linked from the CDN, not copied onto your server). They carry a YouTube or Vimeo badge, appear under the Video filter, and get the same collections, labels, and usage tracking as other assets.
Every embed asset has a dedicated detail page with an embedded player behind a click-to-play consent overlay. You can preview the video directly in the admin without leaving MediaHub, which is useful when you need to verify content or check player settings.
YouTube uses the privacy-enhanced no-cookie player host.
And if you want a custom poster instead of the provided thumbnail, you can pick any library image or crop on the asset detail page. That override is optional; embeds always have a visual reference either way.
YouTube and Vimeo in MediaHub fields
Once a video is in the library, editors insert it the same way they insert an image. Open the MediaHub picker from a MediaHub field or from the TinyMCE toolbar, choose the embed, and set alignment (center by default), max width, and iframe title before it lands in the content.
Editing in TinyMCE. Double-click an embedded video in the editor to reopen the dialog and adjust settings. The embed wrapper supports sizing and alignment that survive page save, and an editor-only edit control (black side tab with pencil icon) lets you change settings without leaving the editor.
Player parameters. The insert dialog includes playback options: start at, show controls, autoplay muted, and loop. Unknown URL parameters pass through unchanged, and there is a collapsible advanced field for direct editing or developer overrides. These options work for both YouTube and Vimeo.
The insert survives page save with HTMLPurifier enabled. The responsive layout lives as inline styles on the stored markup, so the embed does not depend on a separate front-end stylesheet injection.
One of the parts of the YouTube/Vimeo integration I reach for most is playing the embed inline in TinyMCE before you save the page, so you see what visitors will see on the front end. That is especially useful when you set a start at time: you can confirm the clip begins where you intended without waiting until after publish.
In the Inputfield drawer, embed assets hide filename and rename controls (there is no file on disk) and show a read-only video URL instead. In proportional view they render as wide 16:9 posters so they read as video cards next to your images.
Image captions in TinyMCE
MediaHub image inserts in rich text now support captions the same way ProcessWire's native image dialog does. Tick Caption? in the insert dialog and MediaHub wraps the image in a <figure> with a placeholder <figcaption>. A short tip reminds you that caption text is edited in the editor after insert, not typed into the dialog.
Edit the placeholder in TinyMCE like any other text. Alignment sits on the figure when a caption is on, and on the image when it is off. Untick Caption later and the figure unwraps cleanly. The same library image can appear twice in one article with different captions, because each caption lives in the page HTML for that insert, not on the asset.
Caption text can include links, same as body copy. Select the caption text, use Insert Link, and expand Select from Media Hub to pick a library asset, or select the caption text and use the MediaHub toolbar button to wrap it as a link. Uncaptioned inserts stay as bare images, so existing content and the default insert path are unchanged.
Inline audio and video preview
Asset detail pages now attempt inline video and audio preview with native browser controls. When your browser can decode the file (for example, a standard MP4 or MP3), you can verify content without downloading first.
When the browser cannot decode the file (unsupported codec or container), the page falls back to the file icon and download button instead of showing a broken player.
Credit: Feuervogel by Stefanowitsch / Dayfly’s Diary. Buy See the Light on Bandcamp.
For YouTube and Vimeo embeds, the detail page uses the embedded player with consent, so preview stays in the admin either way.
Preview covers for PDFs, audio, and documents
PDFs, audio files, and other non-image assets can show a preview image in the library instead of a file-type icon. MediaHub can auto-generate these covers when the server supports it (PDF page 1, embedded MP3 artwork), or you can choose an existing library image or crop as the preview when you want a curated visual. Embedded MP3 artwork stays attached to the audio asset and is not imported as a separate library image.
This extends beyond video. Any non-image asset can have a custom preview cover, which makes the library more visually consistent and easier to browse when you have mixed media types. Module settings under Preview covers let you turn auto-generation on per type.
Not every host has Imagick, Poppler, Ghostscript, or ffmpeg available. When auto-generation is unavailable, or when you simply want different art, choose any existing library image or crop as a manual override. Auto covers can be replaced at any time.
YouTube and Vimeo embeds are separate from this toggle. They always show a provider thumbnail, with the optional custom cover described above.
German admin UI
German-speaking editors can now use the full MediaHub interface in their language. 1.19.51 ships with a bundled German translation (languages/de.csv) covering around 1,107 strings across every screen: library, asset detail, upload, crop editor, labels, folders, picker, inputfield drawer, module config (including Preview covers and the asset detail Preview image section), JS dialogs, and admin flash messages.
Translation import is automatic. When ProcessWire's Language Support module is installed and a language with the page name de exists, refreshing or upgrading Process MediaHub imports the German translations automatically. Import also re-runs when the bundled CSV changes or when a new language is added.
All user-facing strings in PHP views and JavaScript are now wrapped with ProcessWire's translation functions, making MediaHub fully translatable to any language through the standard ProcessWire Languages workflow. To translate MediaHub into another language, create the matching language in ProcessWire and import a CSV in the same format as de.csv.
Setup steps. Install ProcessWire's Language Support module, create a language with page name de and title Deutsch, go to Modules and refresh Process MediaHub, then set each admin user's Profile language to Deutsch. The MediaHub admin UI follows the logged-in user's profile language, so setting the site default language to German is not enough on its own. Glossary wording uses Etikett / Etiketten rather than anglicised Label / Labels.
If your German language page has a different name (german, de-DE, or similar), use manual CSV import instead. The automatic import matches the CSV filename to the language page name, so languages/de.csv imports only into a language named de.
Front-end editing (Beta)
MediaHub includes a TinyMCE plugin that adds an "Insert from Media Hub" button to rich text editors. This works reliably in the ProcessWire admin, but front-end editing with PageFrontEdit has been less predictable.
1.19.51 fixes several issues that caused the MediaHub toolbar button to disappear or fail when using PageFrontEdit on sites that load jQuery 3.x independently (for example, via CDN for UIkit or other front-end frameworks). The client-side patch that registers the mediahub external plugin now runs after all config blocks have been merged, guaranteeing it runs after PageFrontEdit's config is available.
Server-side, the patch now adds the mediahub entry to all TinyMCE profiles that already carry external_plugins, not just the default profile. This prevents the plugin from being lost when TinyMCE's getConfig does a shallow merge of a named profile over default. Image alignment classes continue to survive save.
Front-end editing is still marked as Beta. The fixes address the common failure modes I have seen, but PageFrontEdit sites vary enough that I expect edge cases to surface. If you use front-end editing and hit problems, enable logging in MediaHub settings and the media-hub log will capture diagnostic lines for suspected TinyMCE injection issues.
CSS improvements and KonKat compatibility
MediaHub has its own design token system for consistent styling across the library and inputfield. 1.19.51 consolidates these tokens: hardcoded hex values and mismatched fallbacks are replaced with the appropriate --mh-* tokens throughout, including semantic fixes in the crop editor.
Admin-theme surface tokens are improved so library tiles and form controls respond correctly on KonKat and other admin themes. Library tile background is now wired to --mh-surface, and transparent tile borders on KonKat are scoped to the library only (not the picker).
Toolbar filter and sort buttons now own their border, colour, and hover styles explicitly, preventing AdminThemeUikit from overriding them with admin-theme colours. Inputfield form controls (offcanvas drawer, image editor modal) use the surface and border tokens that respond to the KonKat theme override, giving inputs a consistent appearance across admin themes.
One stacking issue is fixed: the asset details drawer on KonKat (and other admin themes with high z-index RTE fields) could render behind the Body TinyMCE field on page edit. The offcanvas is now reparented to body before open and its z-index raised so it stacks above rich text fields.
Library UI polish
Several small improvements make the library feel more refined. The grid and masonry layout now steps from one column on phones through five on wide screens, applied consistently in the main library, asset picker, and URL import results grid.
Non-image file tiles without a preview thumbnail use a vertical icon-over-chin layout (type icon in the 4:3 area, title and badges below), matching the image-card structure. With Details off, the same hover title/filename overlay applies.
Tile info panel padding, title line-height, and filename line-height are updated for tighter, more consistent tile typography across all contexts (library, picker, inputfield). File size badges showing unnecessary decimal places on KB values are rounded (524.7 KB becomes 525 KB), while MB values retain one decimal place.
Sidebar hover backgrounds are fixed: hover background on collection/label links now extends the full width to include the contextual dots menu, and hover background has consistent 4px spacing on both left and right edges for balanced visual padding. The "All Collections" counter alignment is moved outside the link element to match the structure of regular collection items. Favourites now show a count badge when you have favourited assets.
The library sidebar now has a resize handle, so you can drag it to make the sidebar wider or narrower. This is useful when you have deeply nested collections or long label names that need more space to be readable. Your preferred width is remembered per browser. In 1.19.51 the sidebar no longer jumps on load, search, or pagination after you resize it.
Asset detail mobile layout
Asset detail pages are more responsive on narrow screens. The header title and stat cubes now stack instead of overlapping, the usage table scrolls horizontally so columns stay readable, and filenames wrap naturally within the card instead of overflowing or breaking mid-character.
Page Edit Lock Fields compatibility
MediaHub fields now work correctly with the Page Edit Lock Fields module. Dragging the thumbnail size slider on a MediaHub field no longer triggers the "Lock this field?" dialog when long-click on field headers is enabled. Locked MediaHub fields show a read-only thumbnail grid instead of a bulleted list of page titles, matching the behaviour of native image fields.
Other fixes from beta testing
A lot of the 1.19.51 work came from people using the 1.19.50 beta and reporting what broke. A few more worth knowing about:
- Page Reference custom-field checkboxes keep their selection when edited as overrides in the Inputfield drawer.
- PHP 8.5 deprecation warnings during URL import and library image work are cleared.
- Embed layout CSS is no longer injected on every public page or into non-HTML responses. Layout travels with the embed markup itself.
The full issue index is in the changelog.
Upgrading
No database migration is required. No breaking API changes. Sites on 1.19.25 or the 1.19.50 beta upgrade in place through the normal Modules screen. After upgrading, refresh Process MediaHub under Modules.
After upgrade, the German translation imports automatically if you have a language page named de. If not, use the manual CSV import steps from the German admin UI section above. If you inserted video embeds with an earlier build that relied on a separate stylesheet, open and re-save those pages so the inline layout styles are written into the stored HTML.
Download
MediaHub 1.19.51 is available from the 1.19.51 download page. The full list of changes is in the changelog. The 1.19.50 beta is superseded; new installs and upgrades should use 1.19.51.
Credits
Screenshots in this post use third-party media as example library assets. Credit where it is due:
- Audio — Feuervogel by Stefanowitsch / Dayfly’s Diary, from the album See the Light. Buy the album on Bandcamp.
- YouTube — Ottmar Liebert with Luna Negra @ Yoshi's in Oakland, CA 2/24/2026 (CT).
- YouTube — I played 50 SILVER SKY SE's and bought my favorite | PRS guitar REVIEW — Jonathan William.
- Vimeo — AWAKENING | NEW ZEALAND 4K by Martin Heck / Timestorm Films. Part I of a New Zealand landscape timelapse series (Fiordland, Mount Cook, Arthur’s Pass, and more), shot over four months.
- Image — MacBook Neo product photography © Apple. Used as an example remote image import from Apple’s store CDN.