Media Directories
Provides directory structure for Media entities using taxonomy terms, allowing organization of media files into folders with a full-featured jsTree directory browser experience.
media_directories
Overview
Media Directories adds a powerful directory-based organizational system to Drupal's Media entities. By leveraging taxonomy terms as folders, this module allows site administrators and content editors to organize media files into a hierarchical folder structure, similar to a traditional file manager.
The module adds a 'directory' base field to all Media entities, enabling assignment to specific folders. The main module provides core functionality, while the UI submodule offers a rich, interactive browser interface using jsTree, and the Editor submodule integrates with CKEditor for seamless media embedding.
Key capabilities include drag-and-drop media organization, folder creation/renaming/deletion, quick editing of multiple media items, combined upload functionality for multiple file types, and translation support for both directories and media items.
Features
- Adds a directory field to all Media entities for folder organization using taxonomy vocabulary
- Interactive jsTree-based directory browser with full CRUD operations (create, rename, move, delete directories)
- Drag-and-drop support for moving media items between directories
- Quick edit functionality for single or multiple media items simultaneously
- Combined upload feature allowing multiple file types to be uploaded through a single interface
- Media type auto-detection based on file extensions during combined upload
- Field widget integration using Entity Browser for content type media reference fields
- CKEditor integration with embed button for inserting media directly into content
- Image resize functionality in the embed dialog with custom dimensions support
- Translation support for both media items and directory terms via Content Translation module
- Support for Gin and Claro admin themes with optimized styling
- Views filter for filtering media by directory in the Media Library
- Root directory option to show all files regardless of directory assignment
- Admin Toolbar integration for controlling visibility of Media/Files menu links
Use Cases
Organizing media assets for a large website
A corporate website with thousands of images, documents, and videos can use Media Directories to organize assets into department-based folders (Marketing, HR, Products) with subfolders for campaigns, years, or projects. Editors can quickly find and reuse assets by navigating the familiar folder structure.
Multi-site media management
For multisite installations sharing media, directories can represent different sites or brands. Combined with permissions, specific teams can only access and upload to their designated folders while shared assets remain in common directories.
Streamlined content authoring
Content editors using CKEditor can insert images directly into articles using the Media embed button. The embed dialog allows selecting from predefined image styles or setting custom dimensions, making it easy to create properly sized images without manual cropping.
Combined file uploads for media managers
Enable combined upload to allow media managers to drag-and-drop mixed batches of images, documents, and videos. The system automatically creates the appropriate media type for each file based on extension, assigning them all to the selected directory.
Replacing core Media Library interface
Organizations preferring a folder-based workflow can enable the options to hide the core Media and Files tabs, making Media Directories browser the primary interface for all media operations while maintaining full compatibility with the Media Library widget.
Tips
- Use the 'media_library' form display mode on media types to customize which fields appear in the quick edit dialog, keeping it focused on essential fields for faster editing.
- Enable 'Show all files in Root directory' during migration or initial setup to easily find unorganized media, then disable it for cleaner day-to-day operation.
- Create directory structure before bulk importing media to have folders ready for organization during or after import.
- Use the filter field in the toolbar to quickly search within large directories - it filters by media name in the current directory view.
- Right-click on directories in the tree for a context menu with create, rename, and delete options.
- Drag media items directly onto directories in the tree to move them - supports multiple selections for batch moves.
- Configure combined upload with your most commonly used media types to streamline the upload experience for content editors.
Technical Details
Admin Pages 2
/admin/config/media/media_directories
Configure the core settings for Media Directories including selecting the taxonomy vocabulary to use for the directory structure and whether to show all files in the root directory.
/admin/content/browser
Standalone media browser interface providing full directory-based media management. Allows browsing, uploading, editing, moving, and deleting media items organized in folders.
Permissions 1
Hooks 3
hook_entity_base_field_info
Adds the 'directory' base field to all Media entities, allowing assignment to taxonomy term directories.
hook_ENTITY_TYPE_presave (media)
Validates directory field values before saving media entities, ensuring root directory values are stored as NULL.
hook_field_widget_complete_WIDGET_TYPE_form_alter (options_select)
Alters the options_select widget for the directory field to display 'Root directory' instead of '- None -'.
Troubleshooting 5
Ensure the jsTree library is either installed locally at /libraries/jstree/dist/jstree.min.js or allow CDN loading. Check browser console for loading errors. If using Libraries API, the module will automatically detect the library path.
Navigate to /admin/config/media/media_directories and select a taxonomy vocabulary to use for directories. Create a new vocabulary first if needed.
Clear Drupal caches and ensure the Views module is enabled. Check that the media_directories_base view exists and is enabled.
Ensure the file extension matches one of the enabled media types in the combined upload settings. Check that the media type's source field has the extension configured in its allowed file extensions setting.
Add the Media button to your text format configuration at /admin/config/content/formats. Ensure both 'Embed media' and 'Display embedded entities' filters are enabled.