Biblioteca de Medios

EmDash incluye una biblioteca de medios para gestionar imágenes, documentos y otros archivos. Esta guía cubre la carga, organización y uso de medios en tu contenido.

Acceder a la Biblioteca de Medios

Abre la biblioteca de medios desde la barra lateral de administración haciendo clic en Media. La biblioteca muestra todos los archivos cargados con vistas previas, nombres de archivo y fechas de carga.

Subir Archivos

Desde la Biblioteca de Medios

1. Haz clic en Media en la barra lateral de administración

2. Haz clic en Upload o arrastra archivos al área de carga

3. Selecciona uno o más archivos de tu ordenador

4. Espera a que se completen las cargas

Desde el Editor de Contenido

1. En el editor de texto enriquecido, haz clic en el botón de imagen

2. Haz clic en Upload en el selector de medios

3. Selecciona un archivo de tu ordenador

4. Añade texto alternativo y haz clic en Insert

Tipos de Archivo Compatibles

EmDash admite tipos de archivo web comunes:

Backends de Almacenamiento

EmDash admite múltiples backends de almacenamiento. Configura el almacenamiento en tu configuración de Astro:

import { defineConfig } from "astro/config";
import emdash, { local } from "emdash/astro";

export default defineConfig({
  integrations: [
    emdash({
      storage: local({
        directory: "./uploads",
        baseUrl: "/_emdash/api/media/file",
      }),
    }),
  ],
});

import { defineConfig } from "astro/config";
import emdash from "emdash/astro";
import { r2 } from "@emdash-cms/cloudflare";

export default defineConfig({
  integrations: [
    emdash({
      storage: r2({
        binding: "MEDIA_BUCKET",
        publicUrl: "https://media.example.com",
      }),
    }),
  ],
});

{
	"r2_buckets": [
		{
			"binding": "MEDIA_BUCKET",
			"bucket_name": "my-media-bucket",
		},
	],
}

import { defineConfig } from "astro/config";
import emdash, { s3 } from "emdash/astro";

export default defineConfig({
  integrations: [
    emdash({
      storage: s3({
        endpoint: "https://s3.amazonaws.com",
        bucket: "my-media-bucket",
        accessKeyId: process.env.S3_ACCESS_KEY_ID,
        secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
        region: "us-east-1",
        publicUrl: "https://media.example.com",
      }),
    }),
  ],
});

Cómo Funcionan las Cargas

EmDash utiliza URLs firmadas para cargas seguras:

1. El cliente solicita una URL de carga desde la API

2. El servidor genera una URL firmada con vencimiento

3. El cliente carga directamente al almacenamiento usando la URL firmada

4. El servidor registra los metadatos del archivo en la base de datos

Este enfoque mantiene los archivos grandes fuera de tu servidor de aplicaciones y permite cargas directas al almacenamiento en la nube.

Organizar Medios

Carpetas

Crea carpetas para organizar tus medios:

1. Haz clic en New Folder en la biblioteca de medios

2. Ingresa un nombre de carpeta

3. Haz clic en Create

4. Arrastra archivos a las carpetas para organizarlos

Búsqueda

Usa el cuadro de búsqueda para encontrar archivos por nombre. La búsqueda coincide con nombres de archivo parciales.

Filtros

Filtra medios por:

• Type - Imágenes, Documentos, Video, Audio
• Date - Rango de fecha de carga
• Folder - Carpeta específica

Usar Medios en Contenido

En el Editor de Texto Enriquecido

1. Coloca tu cursor donde quieras la imagen

2. Haz clic en el botón de imagen en la barra de herramientas

3. Selecciona una imagen de la biblioteca de medios o carga una nueva

4. Ingresa texto alternativo

5. Haz clic en Insert

Como Imagen Destacada

1. Abre una entrada de contenido en el editor

2. Encuentra el campo Featured Image en la barra lateral

3. Haz clic en Select Image

4. Elige de la biblioteca de medios o carga

5. Haz clic en Save

En Campos Personalizados

Para campos configurados como tipos de imagen o archivo, haz clic en el campo para abrir el selector de medios.

Mostrar Medios en Plantillas

Accede a las URLs de medios desde tus datos de contenido:

---
import { getEmDashEntry } from "emdash";

const { entry: post } = await getEmDashEntry("posts", Astro.params.slug);
---

{post?.data.featured_image && (
  <img
    src={post.data.featured_image}
    alt={post.data.featured_image_alt ?? ""}
  />
)}

Imágenes Responsivas

Para imágenes responsivas, usa el componente Image de Astro con URLs externas:

---
import { Image } from "astro:assets";
import { getEmDashEntry } from "emdash";

const { entry: post } = await getEmDashEntry("posts", Astro.params.slug);
---

{post?.data.featured_image && (
  <Image
    src={post.data.featured_image}
    alt={post.data.featured_image_alt ?? ""}
    width={800}
    height={450}
  />
)}

Eliminar Medios

1. Selecciona el/los archivo(s) que deseas eliminar

2. Haz clic en Delete

3. Confirma la eliminación

API de Medios

Accede a medios programáticamente usando la API de administración.

Subir un Archivo

Sube medios como datos de formulario multiparte:

POST /_emdash/api/media
Content-Type: multipart/form-data
Authorization: Bearer YOUR_API_TOKEN

file=<binary file data>

Una carga exitosa devuelve el elemento de medios almacenado:

{
	"success": true,
	"data": {
		"item": {
			"id": "01ABC123",
			"filename": "hero-image.jpg",
			"mime_type": "image/jpeg",
			"storage_key": "media/abc123/hero-image.jpg",
			"width": 1200,
			"height": 800
		}
	}
}

Listar Medios

La siguiente solicitud lista medios bajo un prefijo:

GET /_emdash/api/media?prefix=images/&limit=20
Authorization: Bearer YOUR_API_TOKEN

Eliminar Medios

La siguiente solicitud elimina un archivo almacenado:

DELETE /_emdash/api/media/images/hero.jpg
Authorization: Bearer YOUR_API_TOKEN

Proveedores de Medios

Además del almacenamiento local, EmDash admite proveedores de medios externos para alojamiento especializado de imágenes y videos. Los proveedores de medios aparecen como pestañas en el selector de medios, permitiendo a los editores elegir de múltiples fuentes.

Proveedores Disponibles

import { defineConfig } from "astro/config";
import emdash from "emdash/astro";
import { cloudflareImages } from "@emdash-cms/cloudflare";

export default defineConfig({
  integrations: [
    emdash({
      // ... database, storage config
      mediaProviders: [
        cloudflareImages({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_IMAGES_TOKEN,
          // Optional: custom delivery domain
          deliveryDomain: "images.example.com",
        }),
      ],
    }),
  ],
});

import { defineConfig } from "astro/config";
import emdash from "emdash/astro";
import { cloudflareStream } from "@emdash-cms/cloudflare";

export default defineConfig({
  integrations: [
    emdash({
      // ... database, storage config
      mediaProviders: [
        cloudflareStream({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_STREAM_TOKEN,
          // Optional: player settings
          controls: true,
          autoplay: false,
          loop: false,
        }),
      ],
    }),
  ],
});

Usar Múltiples Proveedores

Puedes configurar múltiples proveedores. Cada uno aparece como una pestaña en el selector de medios:

import { defineConfig } from "astro/config";
import emdash from "emdash/astro";
import { cloudflareImages, cloudflareStream } from "@emdash-cms/cloudflare";

export default defineConfig({
  integrations: [
    emdash({
      database: d1({ binding: "DB" }),
      storage: r2({ binding: "MEDIA" }),
      mediaProviders: [
        cloudflareImages({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_IMAGES_TOKEN,
        }),
        cloudflareStream({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_STREAM_TOKEN,
        }),
      ],
    }),
  ],
});

La biblioteca de medios local (pestaña “Library”) siempre está disponible junto con cualquier proveedor configurado.

Renderizar Medios de Proveedores

Usa el componente Image para renderizar medios:

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

const { entry: post } = await getEmDashEntry("posts", Astro.params.slug);
---

{post?.data.featured_image && (
  <Image
    image={post.data.featured_image}
    width={800}
    height={450}
  />
)}

El componente automáticamente:

• Detecta el proveedor del valor almacenado
• Renderiza un elemento <img> optimizado
• Aplica optimizaciones específicas del proveedor (p. ej., transformaciones de Cloudflare Images)

Tipo MediaValue

Los campos de medios almacenan un objeto MediaValue que contiene información del proveedor:

interface MediaValue {
  provider?: string;    // Provider ID, defaults to "local"
  id: string;           // Provider-specific ID
  src?: string;         // Direct URL (for local media or plain-string values)
  previewUrl?: string;  // Preview URL for admin display (external providers)
  filename?: string;    // Original filename
  mimeType?: string;    // MIME type
  width?: number;       // Image/video width
  height?: number;      // Image/video height
  alt?: string;         // Alt text
  meta?: Record<string, unknown>; // Provider-specific metadata
}

Esto permite a EmDash renderizar medios correctamente independientemente de dónde estén alojados.

Próximos Pasos

• Trabajar con Contenido - Usar medios en tu contenido
• Crear un Blog - Añadir imágenes a publicaciones de blog
• Consultar Contenido - Mostrar medios en plantillas