Canvas¶
media_directories_canvas integrates the media browser with
Drupal Canvas, the React-based page
builder. With the submodule enabled, media selection inside Canvas opens the
Media Directories browser instead of core's Media Library — in both places
Canvas asks for media:
- Component inputs — image and other media props on components placed in the layout. The prop form in the Settings panel renders the Directories Browser widget, and "Add media" opens the browser with the full directory tree, search and sorting.
- The "Page data" panel — media reference fields on the entity form shown next to the layout, such as the SEO image on Canvas's own Page entity.
Regular entity forms outside Canvas are not affected: there the widget stays whatever the site's form displays configure (see Browser → Swap the field widget).
Install¶
Dependencies: drupal/canvas and
media_directories_browser.
Additional setup¶
None. The takeover is automatic:
- Media props that Canvas would edit with the core Media Library widget are stored and edited with the Directories Browser widget instead. Canvas re-resolves its component configuration when modules are installed, so existing components pick the widget up without manual steps.
- On the "Page data" panel, media reference fields that are configured to use the Media Library widget are rendered with the Directories Browser widget while editing in Canvas. Fields already using the Directories Browser widget (or any other widget) are left alone.
The submodule has no admin UI and no configuration.
Verifying the install¶
- Open a page in the Canvas editor and place a component that has an image prop. Selecting the component shows the Directories Browser widget in the Settings panel, and Add media opens the media browser.
- On a Canvas page, open the Page data panel and expand SEO settings. The Image field's Add media button opens the media browser as well.
- Selections update the live preview, survive Canvas's auto-save, and are persisted when the page is published.