> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Agregar contenido multimedia

> Sube, gestiona e inserta imágenes y otros recursos multimedia en tus páginas de documentación usando el gestor de archivos integrado del editor web de Mintlify.

<div id="supported-file-types">
  ## Tipos de archivo admitidos
</div>

* **Imágenes**: PNG, JPG, JPEG, GIF, WebP (máx. 20 MB)
* **Vídeos**: MP4, WebM (máx. 20 MB)
* **Fuentes**: TrueType (TTF), WOFF, WOFF2
* **Otros**: PDF, ICO (favicons)

<div id="add-media-to-a-page">
  ## Agregar contenido multimedia a una página
</div>

<div id="drag-and-drop">
  ### Arrastrar y soltar
</div>

Arrastra y suelta contenido multimedia desde tu computadora o desde el gestor de recursos sobre una página. En modo visual, la imagen o el video se insertan en línea. En Modo Markdown, el editor inserta la ruta en la posición de tu cursor. Las imágenes se guardan en la raíz de tu carpeta `images/`, y los videos se guardan en la raíz de tu carpeta `videos/`.

<div id="slash-command">
  ### Comando slash
</div>

Escribe <kbd>/image</kbd> para abrir el menú de imágenes o <kbd>/video</kbd> para abrir el menú de vídeos. Sube contenido multimedia nuevo o selecciona entre los archivos existentes.

<div id="embed">
  ### Incrustar
</div>

Escribe <kbd>/embed</kbd> y pega una URL de YouTube, Loom o Vimeo. El editor detecta el proveedor y genera el iframe automáticamente. Al buscar en el menú slash, los términos `youtube`, `yt`, `loom` y `vimeo` también muestran el comando **Embed**.

Para otras incrustaciones, escribe <kbd>/embed</kbd> y activa **Inserción manual** para escribir HTML personalizado.

<div id="upload-files">
  ### Subir archivos
</div>

Usa el explorador de archivos en la barra lateral para subir o buscar archivos. Arrastra y suelta archivos en una carpeta para organizar recursos multimedia.

<Frame>
  <img src="https://mintcdn.com/mintlify/2vGCTglg0h_W2coC/images/editor/assets-light.png?fit=max&auto=format&n=2vGCTglg0h_W2coC&q=85&s=f61f5484c02e90ea06d68d6d0b8ed8f8" alt="Explorador de archivos abierto en el menú de la barra lateral del editor." className="block dark:hidden" width="790" height="816" data-path="images/editor/assets-light.png" />

  <img src="https://mintcdn.com/mintlify/2vGCTglg0h_W2coC/images/editor/assets-dark.png?fit=max&auto=format&n=2vGCTglg0h_W2coC&q=85&s=1f68623f07f19cbefb6d4958724603aa" alt="Explorador de archivos abierto en el menú de la barra lateral del editor." className="hidden dark:block" width="792" height="818" data-path="images/editor/assets-dark.png" />
</Frame>

<div id="format-images">
  ## Formatear imágenes
</div>

Después de insertar una imagen en el modo visual, pasa el cursor por encima para mostrar una barra de herramientas con opciones de formato.

* **Vista previa en modo claro/oscuro**: Cambia entre el modo claro y oscuro para ver cómo se ve la imagen en cada tema.
* **Alineación**: Establece la alineación de la imagen como izquierda, centrada, derecha o a todo el ancho.
* **Frame**: Envuelve la imagen en un componente `<Frame>` para añadir un borde y un fondo.
* **Configuración**: Reemplaza la imagen o actualiza su texto alternativo.

<div id="manage-assets">
  ## Administra los recursos
</div>

<div id="organize-with-folders">
  ### Organiza con carpetas
</div>

Haz clic en el botón **+** del explorador de archivos para crear una nueva carpeta. Arrastra y suelta archivos y carpetas en el árbol de archivos para reordenarlos.

<div id="rename-and-edit-assets">
  ### Renombrar y editar recursos
</div>

Pasa el cursor sobre un recurso y haz clic en el botón **...** para cambiar el nombre del archivo o actualizar su texto alternativo (alt).

<div id="delete-assets">
  ### Eliminar recursos
</div>

Pasa el cursor sobre un recurso y haz clic en el botón <Icon icon="trash" /> para eliminarlo.

<div id="best-practices">
  ## Mejores prácticas
</div>

* **Usa nombres descriptivos**: Pon nombres claros a los archivos, como `api-dashboard-light.png` en lugar de `img1.png`.
* **Agrega texto alternativo (alt text)**: Proporciona texto alternativo descriptivo para mejorar la accesibilidad y el SEO.
* **Organiza con carpetas**: Agrupa los recursos relacionados, como variantes de modo claro y oscuro o recursos para un área de funcionalidad específica.
* **Usa formatos apropiados**: PNG para gráficos con transparencia, JPG para fotos, SVG para iconos y logotipos (no puedes subir archivos SVG a través del editor, pero puedes agregarlos a tu repositorio mediante Git).