diff --git a/editor.mdx b/editor.mdx index bae5ff72d..0511da785 100644 --- a/editor.mdx +++ b/editor.mdx @@ -112,6 +112,60 @@ Use the sidebar file explorer to browse your documentation files. Click on any f Press Command + P on macOS or Ctrl + P on Windows to search for files by name. +### Manage images and media + +The Images and Media view provides a dedicated interface for browsing, previewing, and managing your image and video assets. Access it by selecting **Images and Media** from the sidebar navigation. + + + Images and Media Manager in the visual editor + + Images and Media Manager in the visual editor + + +#### View modes + +Switch between two view modes to browse your assets: + +- **Tree view**: Navigate assets organized by folder structure. Expand and collapse folders to explore your media files hierarchically. +- **Gallery view**: Browse assets in a visual grid grouped by folder. Use the horizontal scroll controls to navigate through assets in each folder. + +Toggle between views using the view mode button in the toolbar. + +#### Preview assets + +Select any image or video to preview it in the right panel. The preview shows: + +- **Images**: Full-size preview with zoom capabilities +- **Videos**: Playback controls for reviewing video content + +#### Asset metadata + +Access detailed information about your files and folders through the configure sheet: + +1. Click the kebab menu icon on any asset or folder +2. Select **Configure** from the dropdown menu +3. View metadata including: + - File path (with copy functionality) + - File size + - File type + - Image dimensions (for images) + - Video dimensions (for videos) + - Folder file count (for folders) + +The configure sheet also allows you to rename files and folders or delete them from your repository. + +#### Search assets + +Use the search bar to quickly find specific assets by name. Search works across all folders and highlights matching text in both tree and gallery views. + ### Create new pages Select the **Create a new file** icon in the file explorer sidebar. diff --git a/guides/media.mdx b/guides/media.mdx index 9641c5317..1fb80d261 100644 --- a/guides/media.mdx +++ b/guides/media.mdx @@ -23,3 +23,15 @@ Key guidelines: * **Videos** for abstract concepts and long workflows. Use media sparingly and intentionally to avoid unnecessary documentation debt. When done right, it enhances comprehension without adding maintenance burdens or accessibility barriers. + +## Managing media in the visual editor + +The visual editor includes an Images and Media Manager that helps you browse, preview, and organize your image and video assets. Access it from the sidebar to: + +- Browse assets in tree or gallery view +- Preview images and videos before using them +- View file metadata like size and dimensions +- Search for specific assets by name +- Copy file paths for easy reference in your documentation + +See [Visual editor](/editor#manage-images-and-media) for detailed information on using the Images and Media Manager.