Configuration¶
Media Directories splits its settings into three admin pages, each scoped to a clear part of the experience:
| Page | Path | What it covers |
|---|---|---|
| Main settings | /admin/config/media/media_directories |
Wiring the module to your taxonomy. |
| Browser | /admin/config/media/media_directories/browser |
How the Vue.js media browser looks and behaves. |
| AI | /admin/config/media/media_directories/ai |
AI-powered alt text and translations (only with media_directories_ai). |
All three require the Administer site configuration permission.
The rest of this page walks through the settings grouped by what they do — not by option name — so you can decide which knob to touch based on the experience you want for editors.
Main module settings¶
Found at /admin/config/media/media_directories. You'll typically visit this
page once during setup and rarely after.
Picking your folder vocabulary¶
The directory tree is just a Drupal taxonomy: every folder is a term, and nesting terms gives you nested folders. The Taxonomy select on this page tells the module which vocabulary plays that role.
- Choose an existing vocabulary or follow the link to create a new one.
- Switching the vocabulary triggers a full cache clear, because the directory field on Media entities is rebuilt against the new vocabulary.
- For most sites a dedicated vocabulary called something like Media directories keeps the folder terms separate from editorial taxonomies.
How the "Root" folder behaves¶
The first node in the sidebar is always Root. The Show all files in Root directory checkbox decides what editors see when they click it:
- Off (default) — Root only shows media that hasn't been assigned to any folder. Useful as a "needs filing" inbox.
- On — Root shows every media item on the site, regardless of folder. Useful when editors want a quick way to browse everything without picking a specific folder first.
Browser configuration¶
Found at /admin/config/media/media_directories/browser. This page controls
the Vue.js browser provided by media_directories_browser — the modal that
opens from the CKEditor button and from field widget dialogs.
Layout and drawers¶
Two side panels can appear next to the media grid. Both are independent and can be turned on or off.
- Preview drawer — opens on the right when a single item is selected and shows a larger preview plus metadata. Only appears on screens 1024 px and wider, so on tablets and smaller screens it's automatically hidden.
- Selection drawer — appears in field widget modals and lists everything the editor has picked during the session, including items from other folders. Helps editors keep track of a multi-item selection that spans several directories.
When the selection drawer is on, you also get a follow-up choice that changes the meaning of the modal's confirm button:
- Pre-load existing field items into the drawer (off, default) — the drawer starts empty. Confirming the modal adds the new selection to whatever was already on the field.
- Pre-load existing field items into the drawer (on) — the drawer starts pre-populated with the field's current items. Confirming the modal replaces the field value with whatever is in the drawer (so editors can also remove existing items, not only add).
Tree appearance¶
- Show directory file counts — adds a badge next to each folder in the sidebar with the number of media items it contains. Slightly heavier on large directory trees, very useful on smaller ones.
- Directory sort mode — controls how sibling folders are ordered:
- Alphabetical (default) sorts by name and disables drag-and-drop reordering.
- Weight sorts by taxonomy term weight and enables drag-and-drop reordering inside the sidebar tree (within the same parent).
Date formatting¶
The media grid and the preview drawer both show timestamps. Each one has its own date format selector so you can tune the density:
- Media list date format — shown under each thumbnail in the grid/list. Defaults to a compact short date (e.g. Apr 22, 2026).
- Details drawer date format — shown for created/updated dates in the preview drawer. Defaults to a localized date+time.
Both selectors offer every non-locked Drupal date format. You can add more at Configuration → Regional and language → Date and time formats.
Performance¶
- Page size (10–200, default 100) — how many items the browser fetches per scroll page. Lower values give snappier first paint and lighter requests; higher values reduce the total number of requests when editors scroll a lot. Sites with very large media libraries usually benefit from staying close to the default.
Remembering user state¶
A handful of options make the browser remember things across sessions in the editor's browser local storage. They're grouped together under Saved preferences in the form. Turn them on to give returning editors a "where I left off" experience; turn them off if you want a clean slate every time.
- Remember sort selection — keep the column/sort order the editor picked.
- Remember last opened directory — re-open the same folder the editor was last in.
- Remember sidebar state — keep the sidebar collapsed/expanded as the editor left it.
- Remember view mode — keep grid vs. list view between sessions.
There's also a pair that controls how the directory tree opens when the browser loads:
- Expand all directories by default (on) — every folder is open on load. The simplest behaviour for small trees.
- Expand all directories by default (off) — only the top level is open; editors expand folders as they need them. When this is off you can also enable Remember expanded directories, which persists each editor's expansion state in local storage so the tree restores between sessions.
Uploads¶
- Enable bulk actions — turns on the per-row autofill controls in the upload and edit forms (e.g. "fill all alt text from filenames", "translate all titles"). Leave off if you'd rather force editors to fill each item manually.
- Enable combined upload — replaces the per-bundle upload fields with a single drop zone. Files are routed to the right media type automatically based on their extension.
- Media types for combined upload — appears when combined upload is on. Pick which file/image-based bundles participate. Bundles whose source field isn't file or image are filtered out of the list automatically.
Translations¶
This section is only meaningful when core's content_translation module is
installed. Without it the form disables the translation controls and shows a
short hint.
- Enable translations — turns on the per-language tab strip in the upload and edit modals.
- Media types with translations — which bundles get the tab strip. Bundles with no translatable fields are skipped automatically even if you tick them here, so it's safe to opt-in broadly.
For AI-assisted translations you also need to configure the AI tab — see below.
CKEditor integration¶
- Show file picker in link form (default on) — adds a Select a file button to CKEditor 5's link balloon. Editors can pick a file from the media browser and link to it, instead of pasting a URL by hand. Turn it off if you don't want file links going through the browser at all.
AI configuration¶
Found at /admin/config/media/media_directories/ai. This tab is only present
when media_directories_ai is enabled, and it relies on a working
AI module setup — pick a provider, set
your key and choose a default model on the AI module's own admin pages first.
The AI tab has two independent features that you can enable separately.
AI alt text¶
- Enable AI alt text generation — adds a "✨ Generate" button to the alt text field in the upload and edit modals. Clicking it sends the image to the configured AI provider and fills the field with the response. Requires a chat provider with image vision.
- Alt text prompt — the prompt sent to the model. Leave blank to use the module's default prompt, which already produces decent alt text for general imagery. Tweak it if your site has a specific style (for example always describing brand assets in a particular tone). The media's language is appended automatically, so you don't need to mention language in the prompt.
AI translations¶
- Enable AI translation — surfaces "AI translate" buttons next to translatable fields in the upload/edit modals. Hitting one pulls a translation from the configured AI provider and fills the target language.
- Media types with AI translation — which bundles get those buttons. Each bundle listed here must also have translations enabled for it on the Browser tab; otherwise the buttons would target fields that aren't translatable.
- Translation prompt — extra instructions appended to the default translation prompt. Useful for pinning tone, terminology or brand vocabulary ("always translate product names as their English original", etc.). Leave blank for the default.
Putting AI translations together¶
To get a fully working AI-translation flow:
- Install and configure the AI module (provider + key + default model).
- Enable
content_translationon the media bundles you want translated. - On the Browser tab, tick Enable translations and select those bundles under Media types with translations.
- On the AI tab, tick Enable AI translation and select the same bundles under Media types with AI translation.
- Optionally adjust the prompt to match your site voice.
Once that's done, editors get language tabs in the modals and an AI translate shortcut next to each translatable field.