Skip to content

Integrations

Media Directories has a small core feature set, but it integrates with a number of optional contrib and core modules. Each integration is opt-in: if the module is not installed nothing breaks, the related UI just won't appear.

This page lists the optional dependencies and what enabling each one unlocks.

Focal Point

  • Package: drupal/focal_point
  • Used by: media_directories_browser
  • Listed in: composer.json (require-dev, suggest)

When focal_point is enabled, image media types that use the Focal Point field formatter expose a focal-point picker inside the media browser's edit modal. Editors can drag a crosshair on the image preview to set the focal point, and the value is saved through Focal Point's own crop entity.

The integration lives in media_directories_browser's FocalPointService (which is a no-op when the module is absent) and the has_focal_point flag returned per media type. No configuration is required beyond installing the module and using its field formatter on your image media type.

SVG Image

  • Package: drupal/svg_image
  • Used by: media_directories_browser
  • Listed in: composer.json (require-dev, suggest)

Enables SVG support in image fields used by media types. With svg_image installed, SVG files uploaded as Image media render correctly in the browser preview and edit modal, and the JSON:API responses report the right MIME type and dimensions for SVG sources.

There is a dedicated kernel test (media_directories_browser/tests/src/Kernel/ApiControllerSvgTest.php) covering this path.

AI

  • Package: drupal/ai
  • Required by: media_directories_ai
  • Listed in: composer.json (require-dev, suggest)

The AI module is a hard dependency of the optional media_directories_ai submodule. Once an AI provider is configured (via the AI module's own settings), the Vue.js browser exposes two extra actions on image and applicable media:

  • Generate alt text — calls the configured AI provider with the image and fills the alt field on the source media.
  • Translate fields — uses AI to translate translatable fields into the configured site languages (works alongside content_translation, see below).

Configure your provider, key and default model on the AI module's admin page before enabling these actions.

Content Translation

  • Package: core content_translation
  • Used by: media_directories_browser, media_directories_ai

When content_translation is enabled and at least one media bundle is marked translatable, the browser's edit modal grows a per-language tab strip for translatable fields (label, alt text, etc.). Translations are loaded and saved through media_directories_browser's MediaTranslationService.

If media_directories_ai is also enabled, an AI translate action becomes available that fills the language tabs from the source language.

Entity Usage

When entity_usage is installed, the media detail view in the browser shows a "where this is used" link pointing at the entity_usage.usage_list route for that media entity. Useful for editors who want to know which nodes reference a piece of media before deleting or replacing it.

The integration is purely additive — without entity_usage the link is simply omitted, and no error is raised.

Admin Toolbar

Not a code-level integration, but worth mentioning. If you only want editors to see the Vue.js media browser and not core's /admin/content/media overview, Admin Toolbar makes it straightforward to hide or restructure the corresponding toolbar items via its configuration.

Quick reference

Module Submodule that uses it What it adds
focal_point _browser Focal-point picker in the edit modal.
svg_image _browser SVG support in image media types.
ai _ai (required) AI alt text + AI translations.
core content_translation _browser, _ai Per-language tabs in the edit modal; AI translate action.
entity_usage _browser "Where used" link on media detail view.
admin_toolbar (none — UX) Hide core's Media overview from the toolbar.