Biblioteca de Medios

La Biblioteca de Medios almacena imágenes, documentos, video y audio reutilizables. Los editores pueden subir archivos una vez, seleccionarlos desde campos de contenido y Portable Text, y ver qué entradas de contenido hacen referencia a un elemento de medios local.

Abrir la Biblioteca de Medios

Seleccione Media en la barra lateral del admin. La biblioteca principal contiene carpetas y archivos que no se han colocado en una carpeta. Seleccione una carpeta para explorar sus archivos, o cambie entre vistas de cuadrícula y lista.

Si el sitio tiene proveedores de medios externos, cada proveedor aparece como otra fuente. Las capacidades de los proveedores varían: una fuente puede soportar navegación y selección pero no carpetas, edición local de imágenes o eliminación.

Subir archivos

Subir desde la biblioteca

Las cargas comienzan tan pronto como se agregan archivos. Los nuevos archivos locales entran en la biblioteca principal, incluso cuando otra carpeta estaba abierta antes de la carga.

Subir mientras edita contenido

Los campos de imagen, archivo, galería y Portable Text imagen usan un selector de medios. Abra el campo, seleccione Upload files y elija o suelte archivos. Una carga completada se convierte en parte de la selección actual; las cargas fallidas permanecen visibles para que pueda reintentar o eliminarlas.

Para una galería, revise Selected media y use los controles de movimiento para establecer el orden antes de seleccionar Add images. Para una imagen o archivo individual, seleccione Select o Insert image después de que la carga termine.

Archivos aceptados y límite de tamaño

La Biblioteca de Medios local acepta estos grupos de archivos por defecto:

• Imágenes PNG, JPEG, GIF, WebP y AVIF;
• formatos de video comunes como MP4, WebM y video QuickTime;
• formatos de audio comunes como MP3, WAV y audio Ogg; y
• documentos PDF.

SVG está excluido de la lista de carga predeterminada porque los archivos SVG pueden contener contenido activo. Un campo de imagen o archivo puede definir su propia lista de tipos de archivo aceptados cuando el modelo de contenido necesita una selección más estrecha u otro formato. EmDash identifica cada archivo por su tipo de medio, una etiqueta como image/png o application/pdf, y verifica la lista del campo nuevamente cuando se guarda el contenido. Cambiar el selector de archivos del navegador no omite esa verificación del servidor.

El máximo predeterminado es 50 MB por archivo. Los desarrolladores del sitio pueden cambiarlo con maxUploadSize. Un proveedor puede imponer un límite adicional de formato o tamaño y reportará ese fallo en la fila de carga.

Encontrar y organizar archivos

La búsqueda coincide con nombres de archivo parciales. El filtro de tipo limita los resultados a imágenes, documentos, video o audio. Una búsqueda por nombre de archivo cubre toda la biblioteca local, incluso mientras una carpeta está abierta; navegar una carpeta sin búsqueda muestra solo los archivos asignados a esa carpeta.

Los editores pueden seleccionar Add new folder en la biblioteca principal. Mueva un archivo local arrastrando su tarjeta o fila a una carpeta visible, o abra el archivo, cambie Location y seleccione Save. Use Main library como ubicación para eliminar un archivo de su carpeta actual.

Los autores pueden mover archivos locales que subieron. Los editores pueden mover cualquier archivo local. Los elementos de proveedores externos no pueden asignarse a carpetas de la Biblioteca de Medios.

Eliminar una carpeta mueve sus archivos de vuelta a la biblioteca principal. No elimina los archivos, cambia sus URLs ni elimina sus referencias de contenido.

Seleccionar medios para contenido

Imágenes de Portable Text

Coloque el cursor en un campo Portable Text, abra el menú de bloques y seleccione Image. Elija o suba una imagen, luego seleccione Insert image. Seleccione el bloque de imagen después para agregar texto alternativo, una leyenda, dimensiones de visualización y alineación.

Campos de imagen y archivo

Seleccione la acción del campo, como Select image o Select file, luego elija un elemento y confirme la selección. Las reglas de tipo MIME de un campo limitan qué elementos de biblioteca y fuentes de medios aparecen.

El campo featured_image de la plantilla de blog almacena el valor de medios seleccionado con la publicación. Guardar la entrada guarda esa referencia en el borrador; publicar la hace disponible para consultas de contenido público.

Campos de galería

Seleccione una o más imágenes, organícelas bajo Selected media y confirme. Una galería mantiene su propio orden y texto alternativo y leyenda por imagen, incluso cuando varias posiciones se refieren a elementos de la Biblioteca de Medios.

Editar una imagen usada en contenido

Una imagen local seleccionada ofrece acciones con diferentes alcances:

• Replace elige un elemento diferente de la Biblioteca de Medios para este campo, bloque o posición de galería. Otras entradas que usan el elemento original no cambian.
• Edit asset abre el elemento subyacente de la Biblioteca de Medios. Los cambios de metadatos y cambios destructivos de imagen pueden afectar otros usos de ese elemento.
• Remove limpia esta referencia de contenido. El elemento de la Biblioteca de Medios permanece disponible.

Cuando Edit asset crea una copia recortada, el selector selecciona la nueva copia para el uso actual. Las imágenes de Portable Text y galería mantienen el texto alternativo, leyenda, diseño y posición de ese uso. Cuando Edit asset reemplaza el original, el ID de medios permanece igual, por lo que cada uso de ese elemento recibe la imagen cambiada.

Las imágenes de proveedores externos y los campos de archivo ofrecen Replace y Remove pero no abren el editor de activos local.

Reemplazar una imagen local

Replace image sube nuevos bytes detrás de un elemento existente de la Biblioteca de Medios. Úselo cuando cada lugar que hace referencia al elemento deba mostrar una nueva versión de la imagen.

La acción está disponible para elementos JPEG, PNG y WebP listos. Los autores pueden reemplazar imágenes que subieron; los editores pueden reemplazar cualquier imagen local.

EmDash mantiene el ID de medios, nombre de archivo, URL, texto alternativo, leyenda y carpeta. Las referencias de contenido existentes por lo tanto continúan funcionando y muestran el reemplazo. El reemplazo limpia el punto focal guardado porque sus coordenadas pueden no describir la nueva imagen.

Use Replace en el editor de contenido en su lugar cuando solo un campo o bloque de imagen deba cambiar.

Establecer un punto focal

Un punto focal marca la parte de una imagen que debe permanecer visible cuando un diseño recorta la imagen para llenar un cuadrado, paisaje, retrato u otra forma fija.

Seleccione Reset para eliminar el punto personalizado. Cuando elige una imagen para un campo o galería, EmDash copia el punto focal actual del activo en ese valor de contenido. El contenido que ya usa la imagen mantiene su punto almacenado hasta que seleccione la imagen nuevamente. Abrir Edit asset desde un campo de contenido actualiza ese uso actual con el punto que guarde.

Recortar una imagen local

El recorte está disponible para imágenes JPEG, PNG y WebP listas almacenadas por EmDash. Las imágenes de proveedores externos no se pueden recortar en el editor de activos local.

Replace original está disponible solo con la relación de aspecto Original. Use Create cropped copy para Freeform y las otras proporciones. Una copia recortada permanece en la misma carpeta que su fuente y recibe un nombre de archivo único.

Recortar un WebP animado crea un WebP estático. El resultado recortado no retiene la animación.

Ver dónde se usa un archivo

Abra un archivo local y seleccione Used in para listar las entradas de contenido que lo referencian. Cada resultado nombra la colección y los campos que contienen la referencia y puede abrir la entrada para edición. Las entradas en la papelera se identifican en la lista.

El seguimiento de uso de medios debe estar activo antes de que esta lista pueda estar completa. Un administrador lo activa una vez para el sitio:

Una vez habilitado, el seguimiento de uso de medios no se puede desactivar. Los nuevos cambios de contenido se rastrean después de que la captura se active; el escaneo en segundo plano agrega referencias de entradas que ya existían.

Si la vista Used in reporta que la indexación está ejecutándose, obsoleta, parcial o fallida, trate sus resultados como incompletos. Un administrador puede regresar a Media usage tracking para el estado actual y la guía de recuperación.

Renderizar una imagen en una plantilla

Los campos de imagen devuelven un valor de medios en lugar de una URL simple. Renderice ese valor con Image de emdash/ui para que las imágenes locales y respaldadas por proveedores usen la URL, dimensiones, punto focal, variantes responsivas y marcador de posición de baja calidad apropiados:

---
import { getEmDashEntry } from "emdash";
import { Image } from "emdash/ui";

const { entry: post, error } = await getEmDashEntry("posts", Astro.params.slug);
if (error) return new Response("Unable to load post", { status: 500 });
if (!post) return Astro.redirect("/404");
---

{post.data.featured_image && (
  <Image image={post.data.featured_image} width={1200} height={675} priority />
)}

Use priority solo para la imagen principal visible en la parte superior de la página. Solicita carga eager y da al navegador una sugerencia de fetch-priority alta. Otras imágenes deben retener el valor predeterminado de carga lazy del componente.

Si el campo tiene una contraparte de modo oscuro, Image renderiza ambas fuentes y selecciona una del esquema de color del visitante. Vea Imágenes de modo oscuro para la configuración del campo y la plantilla.

La plantilla recibe los metadatos de medios almacenados con la referencia de contenido sin otra consulta a la Biblioteca de Medios. Si una integración personalizada requiere los metadatos más recientes del proveedor, solicite ese elemento explícitamente y evite una búsqueda de proveedor por imagen en una página de colección. La referencia de tipos de campo describe los valores almacenados de archivos e imágenes.

Configurar almacenamiento y proveedores

La biblioteca local almacena archivos a través del adaptador de almacenamiento configurado del sitio. Los sitios Node.js pueden usar almacenamiento en disco local o compatible con S3; los sitios Cloudflare comúnmente usan un enlace R2. El adaptador decide dónde se almacenan los bytes, mientras que la Biblioteca de Medios mantiene el mismo flujo de trabajo de autoría. Vea Almacenamiento de medios para requisitos de configuración y persistencia en producción.

Cloudflare Images y Cloudflare Stream pueden registrarse como proveedores de medios externos. Aparecen como fuentes en el selector, e Image entiende los valores de imagen respaldados por proveedores. Los elementos del proveedor permanecen gestionados por ese servicio, por lo que las carpetas locales, puntos focales, recorte y reemplazo no están disponibles para esos elementos en el editor de activos de EmDash.

Eliminar medios de forma segura

Abra un archivo en la Biblioteca de Medios, seleccione Delete y confirme la eliminación permanente. Los autores pueden eliminar archivos locales que subieron; los editores pueden eliminar cualquier archivo local. Un elemento de proveedor se elimina de su proveedor solo cuando esa fuente expone la eliminación y el usuario actual tiene permiso.

Para cargas automatizadas y gestión de medios, vea la referencia de endpoints de medios o los comandos de medios CLI. Continúe con Trabajar con Contenido para publicar entradas que usen los medios seleccionados.