Menu

Sign In Create Free Account
Docs MediaHub Version 1.x MediaHub Image Editor

MediaHub Image Editor

Dedicated TinyMCE dialog for MediaHub images. Alignment, sizing, alt text, transparent PNG preview, and optional figure captions. Available from MediaHub 1.15.0; captions from 1.19.51.

From MediaHub 1.15.0, inserted library images open in a dedicated TinyMCE dialog instead of ProcessWire's native image editor. The dialog puts alignment, sizing, and alt text in one place, and from 1.19.51 you can optionally wrap inserts in a captioned <figure>.

This page covers the image editor only. YouTube and Vimeo embeds use a separate insert/edit dialog (from 1.19.51). Uploaded video files (MP4, etc.) insert as plain <video controls> tags with no dedicated edit popup. See YouTube and Vimeo Embeds for the embed dialog.

When the editor opens

  • Insert: pick an image from the MediaHub toolbar button and confirm. The editor opens before the image lands in the content.
  • Re-edit: double-click a MediaHub image already in the rich-text field.

Non-MediaHub images (uploaded through ProcessWire's native image tools) continue to use ProcessWire's standard image dialog. Double-click routing depends on the data-mediahub-id attribute on the <img> tag.

Controls

ControlWhat it does
Alignment (left, centre, right)Applies layout classes to the image. Centre is the default for new inserts.
Width and heightPixel dimensions with locked aspect ratio. Changing one updates the other.
Size sliderQuick scaling between thumbnail and full size.
Alt / DescriptionPopulates the alt attribute on the inserted <img>.
Checkerboard togglePreviews transparent PNGs against a chequered background.
Caption? (from 1.19.51)Wraps the image in <figure> with a placeholder <figcaption>. Edit caption text in TinyMCE after insert.

Captions

Tick Caption? in the insert dialog and MediaHub wraps the image in semantic figure markup. A short tip in the dialog reminds you that caption text is edited in the editor after insert, not typed into the dialog itself.

  • Edit the placeholder caption like any other text in TinyMCE.
  • Alignment applies to the <figure> when a caption is on, and to the <img> 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. Caption text lives in the page HTML for that insert, not on the asset record.
  • Caption text can include links (Insert Link, or wrap selected caption text with the MediaHub toolbar button).

Uncaptioned inserts stay as bare images, so existing content and the default insert path are unchanged.

Crops in the picker

If the source image has crops, the MediaHub picker shows the crop panel before the image editor opens. The selected variant (original or a named crop) is what gets inserted. See Rich Text Integration for picker behaviour.

Rename tracking

Inserted images carry data-mediahub-id with the asset page ID. When you rename the file in MediaHub, the module updates matching embeds across the site. The marker survives page save on supported configurations (fixed in 1.15.0).

<img src="/site/assets/files/1234/office-photo.jpg"
alt="Our London office"
data-mediahub-id="1234" />

See Rich Text Integration for rename behaviour across all asset types.

Front-end editing

The image editor and alignment classes work on PageFrontEdit from 1.19.51. Front-end editing remains Beta. See Front-end Editing for setup and troubleshooting.

See also

Last updated