Media Directories

This module offers an alternative way to browse and use Medias. Initial UI is available (full featured jsTree directory browser experience) and enhances the Media experience.
It provides directory/folder structure for Media entities, after enabling, a new field will appear to Media entities, which will allow assigning them to folders.

Current features

• Provides integration with Media and Media library
• Folder field
• Special Media overview
• Special field widget for Media entity references
• Editor integration

Requirements

• Drupal 9.5
• Media (core)
• Media library (core)
• Entity browser (by submodule media_directories_ui)
• Entity embed (by submodule media_directories_editor)
• jsTree library (is taken from CDN as long as no min.js file exists), we recommend to install it manually (fe. to be able to work offline):
  1. Download jsTree from https://github.com/vakata/jstree
  2. Extract it as is, rename "jstree-X.Y.Z" to "jstree", so the assets are at:
     /libraries/jstree/dist/jstree.min.js

Note: jsTree library is ready to be managed via composer using the `wikimedia/composer-merge-plugin`. See README.md for more information.

Worked best with seven (separate installable module for D10) as admin theme. Claro (and gin) are also supported. See #3157864: Expose the admin theme library used and allow inputing any

Installation

The module contains two submodules, one for the CKEditor integration and one for media reference fields and UI.

1. Enable the module suite (media_directories_editor, media_directories_ui or only media_directories).
2. Create a new vocabulary to hold directory structure.
3. Select that vocabulary from the settings: /admin/config/media/media_directories
4. media_directories_ui
   • Use the entity browser Media Directory: Field widget form widget on your content types media reference fields
   • Enable the media form display media_library (/admin/structure/media/manage/image/form-display) and limit the fields to configure a nice quick edit dialog.
   • Optionally enable the combined upload form
5. media_directories_editor
   • Add the directory icon-ed Media button to a text format, fe. full_html (/admin/config/content/formats/manage/full_html) and make sure "Embed media" and "Display embedded entities" filter are enabled.

Also review the permissions. Entity browser permissions need to be granted and then users can view and insert into content, but to create, move/edit and delete they need the proper media and taxonomy term permissions set.

Migration of an existing vocabulary

We do not support the migration of an already existing vocabulary, as we use a dedicated term reference, and not a regular field.
Still - you can manually follow the approach mentioned here #3405584: Existing term settings ignored to migrate an already existing term reference on your medias.

Recommended modules

• Image resize filter for the editor integration is actively supported.
• Admin toolbar is actively supported, there are options in the settings to remove the standard media overview and other links.

Inspiration

• Image style warmer will help improve performance when you deal with a lot of new images.
• Permissions by term permissions_by_entity sub-module (experimental) for a drag'n'drop media permission solution (see also #3113914: Dealing with permissions of folder terms).

Roadmap

#3102317: [META] Roadmap