diff --git a/editor.mdx b/editor.mdx index bae5ff72d..123874535 100644 --- a/editor.mdx +++ b/editor.mdx @@ -112,6 +112,56 @@ 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 visual editor includes an Images and Media view for browsing, previewing, and managing your image and video assets. + +To access the Images and Media view, select **Images and Media** from the sidebar navigation. + + + Images and Media view in the visual editor + + Images and Media view in the visual editor + + +#### View modes + +The Images and Media view offers two ways to browse your assets: + +- **Tree view**: Browse assets organized by folder structure. This view is ideal for navigating large collections of media files. +- **Gallery view**: Browse assets as thumbnails grouped by folder. This view is ideal for quickly identifying specific images or videos. + +Use the view toggle button in the toolbar to switch between tree and gallery views. + +#### Preview assets + +Select any image or video file to preview it in the right panel. The preview shows: + +- Full-size image or video player +- File metadata including size and dimensions +- File path for easy reference + +#### Configure assets + +Right-click on any file or folder to access configuration options: + +- **Copy path**: Copy the file path to your clipboard for use in your documentation +- **Configure**: Open the configuration panel to view detailed metadata including file name, path, size, type, and dimensions + +The configuration panel also allows you to rename files and folders (coming soon) and delete assets (coming soon). + +#### Search assets + +Use the search bar to filter assets by name. The search works in both tree and gallery views, making it easy to find specific files in large media libraries. + ### 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..6d76decfd 100644 --- a/guides/media.mdx +++ b/guides/media.mdx @@ -23,3 +23,14 @@ 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 assets + +The visual editor includes an Images and Media view that helps you browse, preview, and manage your image and video assets. This feature makes it easier to: + +- **Find assets quickly**: Search and browse your media files in tree or gallery view +- **Preview before using**: View full-size previews of images and videos +- **Copy file paths**: Easily copy file paths to reference in your documentation +- **View metadata**: Check file size, dimensions, and other properties + +To access the Images and Media view, open the [visual editor](/editor) and select **Images and Media** from the sidebar navigation. See the [Visual editor](/editor#manage-images-and-media) documentation for detailed information on using this feature.