diff --git a/editor.mdx b/editor.mdx index bae5ff72d..b83b70e19 100644 --- a/editor.mdx +++ b/editor.mdx @@ -112,6 +112,51 @@ 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. Access it by selecting **Images and Media** from the sidebar. + + + Images and Media view in the visual editor + + Images and Media view 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 find specific files. +- **Gallery view**: Browse assets as thumbnails grouped by folder. Scroll horizontally through each folder's assets. + +Use the view toggle button in the toolbar to switch between tree and gallery views. + +#### Preview assets + +Select any image or video to preview it in the main 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: + +- **File options**: View and edit file name, path, size, type, and dimensions +- **Folder options**: View and edit folder name, path, and file count +- **Copy path**: Copy the file or folder path to your clipboard for use in your documentation + +The configure sheet displays all metadata for the selected asset, making it easy to reference file details when writing documentation. + ### 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..41e2ac2aa 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 for managing your image and video assets. Access it from the sidebar to: + +- Browse assets in tree or gallery view +- Preview images and videos +- View file metadata (size, dimensions, path) +- Copy file paths for use in your documentation + +See [Visual editor](/editor#manage-images-and-media) for more information on using the Images and Media view.