E EmDash CMS Everything Guides, use cases, plugins, templates
Deutsch

Mediathek

Auf dieser Seite

EmDash enthält eine Mediathek für Bilder, Dokumente und andere Dateien. Diese Anleitung behandelt Hochladen, Organisation und Nutzung von Medien in Ihren Inhalten.

Mediathek öffnen

Öffnen Sie die Mediathek über die Admin-Seitenleiste mit Media. Die Bibliothek zeigt alle hochgeladenen Dateien mit Vorschau, Dateinamen und Upload-Datum.

EmDash-Mediathek mit Bildraster und Upload-Schaltfläche

Dateien hochladen

Aus der Mediathek

  1. Klicken Sie in der Admin-Seitenleiste auf Media

  2. Klicken Sie auf Upload oder ziehen Sie Dateien in den Upload-Bereich

  3. Wählen Sie eine oder mehrere Dateien auf Ihrem Computer

  4. Warten Sie, bis die Uploads abgeschlossen sind

Im Content-Editor

  1. Klicken Sie im Rich-Text-Editor auf die Bild-Schaltfläche

  2. Klicken Sie im Medien-Picker auf Upload

  3. Wählen Sie eine Datei auf Ihrem Computer

  4. Alt-Text eingeben und Insert klicken

Unterstützte Dateitypen

EmDash unterstützt gängige Web-Dateitypen:

KategorieErweiterungen
Bilder.jpg, .jpeg, .png, .gif, .webp, .avif, .svg
Dokumente.pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx
Video.mp4, .webm, .mov
Audio.mp3, .wav, .ogg

Speicher-Backends

EmDash unterstützt mehrere Speicher-Backends. Konfiguration in der Astro-Konfiguration:

Local Storage

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",
      }),
    }),
  ],
});

Dateien liegen im Verzeichnis ./uploads. Geeignet für Entwicklung und Single-Server-Betrieb.

Cloudflare R2

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

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

Erfordert einen in wrangler.jsonc konfigurierten R2-Bucket:

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

S3-Compatible

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",
      }),
    }),
  ],
});

Funktioniert mit Cloudflare R2 (S3-API), MinIO und anderen S3-kompatiblen Diensten.

Ablauf beim Hochladen

EmDash nutzt signierte URLs für sichere Uploads:

  1. Client fordert eine Upload-URL von der API an

  2. Server erzeugt eine signierte URL mit Ablaufzeit

  3. Client lädt direkt zum Speicher über die signierte URL hoch

  4. Server speichert Datei-Metadaten in der Datenbank

Große Dateien belasten so nicht den App-Server; direkter Upload in Cloud-Speicher ist möglich.

Medien organisieren

Ordner

Ordner zur Strukturierung anlegen:

  1. Klicken Sie in der Mediathek auf New Folder

  2. Ordnernamen eingeben

  3. Create klicken

  4. Dateien per Drag & Drop in Ordner sortieren

Suche

Suchfeld nutzen; Suche matcht Teilstrings im Dateinamen.

Filter

Filtern nach:

  • Type – Bilder, Dokumente, Video, Audio
  • Date – Upload-Zeitraum
  • Folder – bestimmter Ordner

Medien in Inhalten nutzen

Im Rich-Text-Editor

  1. Cursor an die gewünschte Stelle setzen

  2. Bild-Schaltfläche in der Toolbar klicken

  3. Bild aus der Mediathek wählen oder neues hochladen

  4. Alt-Text eingeben

  5. Insert klicken

  1. Inhaltseintrag im Editor öffnen

  2. Feld Featured Image in der Seitenleiste finden

  3. Select Image klicken

  4. Aus Mediathek wählen oder hochladen

  5. Save klicken

In benutzerdefinierten Feldern

Bei als Bild oder Datei konfigurierten Feldern: Feld anklicken, um den Medien-Picker zu öffnen.

Medien in Templates anzeigen

Medien-URLs aus den Inhaltsdaten:

---
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 ?? ""}
  />
)}

Responsive Images

Für responsive Bilder Astro’s Image-Komponente mit externen URLs nutzen:

Responsive Images

Für responsive Bilder Astro’s Image-Komponente mit externen URLs nutzen:

---
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}
  />
)}

Medien löschen

  1. Zu löschende Datei(en) auswählen

  2. Delete klicken

  3. Löschen bestätigen

Media-API

Programmgesteuert über die Admin-API.

Datei hochladen

Als multipart/form-data:

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

file=<binary file data>

Antwort:

{
	"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
		}
	}
}

Medien auflisten

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

Medien löschen

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

Media-Provider

Neben lokalem Speicher unterstützt EmDash externe Media-Provider für spezialisiertes Bild- und Video-Hosting. Provider erscheinen als Tabs im Medien-Picker.

Verfügbare Provider

Cloudflare Images

Cloudflare Images bietet Bild-Hosting mit Optimierung, Größenanpassung und Formatkonvertierung.

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",
        }),
      ],
    }),
  ],
});

Features:

  • Bilder direkt aus dem Admin durchsuchen und hochladen
  • Automatische Bildoptimierung und Formatkonvertierung
  • URL-basierte Transformationen (Größe, Zuschnitt, Format)
  • Flexible Varianten für responsive Bilder

Cloudflare Stream

Cloudflare Stream bietet Video-Hosting mit HLS/DASH Adaptive Streaming.

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,
        }),
      ],
    }),
  ],
});

Features:

  • Videos aus dem Admin durchsuchen, suchen und hochladen
  • HLS- und DASH-Adaptive-Streaming
  • Automatische Thumbnail-Generierung
  • Direct Upload für große Dateien

Mehrere Provider

Mehrere Provider konfigurierbar; jeder erscheint als Tab im Picker:

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,
        }),
      ],
    }),
  ],
});

Die lokale Mediathek (Tab „Library“) ist immer neben konfigurierten Providern verfügbar.

Provider-Medien rendern

Image-Komponente zum Rendern:

---
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}
  />
)}

Die Komponente:

  • erkennt den Provider aus dem gespeicherten Wert
  • rendert ein optimiertes <img>
  • wendet provider-spezifische Optimierungen an (z. B. Cloudflare Images)

MediaValue-Typ

Medienfelder speichern ein MediaValue-Objekt mit Provider-Informationen:

interface MediaValue {
  provider?: string;    // Provider ID, defaults to "local"
  id: string;           // Provider-specific ID
  src?: string;         // Direct URL (for local media or legacy data)
  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
}

So rendert EmDash Medien korrekt unabhängig vom Hosting.

Nächste Schritte