Skip to content

Installation

Media Directories is a meta-package: the base module gives Media entities a directory field, and each submodule layers a specific editor feature on top. You only enable the pieces you actually need.

Requirements

  • Drupal: 11 or 12. The base module also supports 10.2, but media_directories_browser and everything built on it requires 11+.
  • PHP: whatever your Drupal core version requires.

The base media_directories module depends on these core modules: media, media_library, taxonomy, views.

Install with Composer

composer require drupal/media_directories

Then enable the submodules you want — see the pages below for what each one does and how to configure it.

# Required base.
drush en media_directories

# Recommended editor experience (Vue.js browser + CKEditor 5 integration).
drush en media_directories_browser

Pick your submodules

Submodule When you need it
Base module Always — the directory field lives here.
Browser You want the Vue.js media browser and the CKEditor 5 button.
File link Editors should be able to insert file download links inside CKEditor 5.
AI You want AI-generated alt text or AI-translated media metadata.
Image resize Inline images in rich text should be physically resized to the dimensions set in the editor.
Compatibility You're migrating from entity_embed-based embeds and need legacy markup to keep rendering.

Suggested companion modules

These aren't strictly required, but Media Directories gets noticeably more useful with them installed. The first three are listed under suggest in the project's composer.json.

Package Why you'd want it
drupal/svg_image Adds SVG support to image fields used by media types.
drupal/focal_point Enables focal point selection inside the media browser.
drupal/ai Required by media_directories_ai for AI-generated alt text and translations.

Verifying the install

After enabling the modules you want:

  1. Visit /admin/config/media/media_directories and confirm a vocabulary is selected.
  2. If you enabled media_directories_browser, open /admin/content/media-browser — the Vue.js browser should load with your directory tree on the left and a media grid on the right.
  3. If you enabled media_directories_ai, open the AI tab on the settings page and confirm the form is reachable (you'll wire it up to a provider on that page).