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 browser's 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.

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.