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

Medienbibliothek

Auf dieser Seite

EmDash enthält eine Medienbibliothek zur Verwaltung von Bildern, Dokumenten und anderen Dateien. Dieser Leitfaden behandelt das Hochladen, Organisieren und Verwenden von Medien in Ihren Inhalten.

Zugriff auf die Medienbibliothek

Öffnen Sie die Medienbibliothek über die Admin-Seitenleiste, indem Sie auf Media klicken. Die Bibliothek zeigt alle hochgeladenen Dateien mit Vorschaubildern, Dateinamen und Upload-Daten an.

EmDash-Medienbibliothek mit Bildraster und Upload-Button

Dateien hochladen

Aus der Medienbibliothek

  1. Klicken Sie auf Media in der Admin-Seitenleiste

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

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

  4. Warten Sie, bis die Uploads abgeschlossen sind

Aus dem Content-Editor

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

  2. Klicken Sie im Medienauswahldialog auf Upload

  3. Wählen Sie eine Datei von Ihrem Computer aus

  4. Fügen Sie Alt-Text hinzu und klicken Sie auf Insert

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. Konfigurieren Sie den Speicher in Ihrer 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 werden im Verzeichnis ./uploads gespeichert. Geeignet für Entwicklung und Single-Server-Bereitstellungen.

Cloudflare R2

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

Erfordert einen R2-Bucket, der in wrangler.jsonc konfiguriert ist:

{
	"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 (über S3 API), MinIO und anderen S3-kompatiblen Diensten.

Wie Uploads funktionieren

EmDash verwendet signierte URLs für sichere Uploads:

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

  2. Server generiert eine signierte URL mit Ablaufzeit

  3. Client lädt direkt zum Speicher mit der signierten URL hoch

  4. Server speichert die Dateimetadaten in der Datenbank

Dieser Ansatz hält große Dateien von Ihrem Anwendungsserver fern und ermöglicht direkte Uploads in Cloud-Speicher.

Medien organisieren

Ordner

Erstellen Sie Ordner, um Ihre Medien zu organisieren:

  1. Klicken Sie auf New Folder in der Medienbibliothek

  2. Geben Sie einen Ordnernamen ein

  3. Klicken Sie auf Create

  4. Ziehen Sie Dateien in Ordner, um sie zu organisieren

Suche

Verwenden Sie das Suchfeld, um Dateien nach Namen zu finden. Die Suche erkennt Teil-Dateinamen.

Filter

Filtern Sie Medien nach:

  • Type - Bilder, Dokumente, Video, Audio
  • Date - Upload-Datumsbereich
  • Folder - Bestimmter Ordner

Medien in Inhalten verwenden

Im Rich-Text-Editor

  1. Platzieren Sie Ihren Cursor an der Stelle, an der Sie das Bild einfügen möchten

  2. Klicken Sie auf die Bild-Schaltfläche in der Symbolleiste

  3. Wählen Sie ein Bild aus der Medienbibliothek aus oder laden Sie ein neues hoch

  4. Geben Sie Alt-Text ein

  5. Klicken Sie auf Insert

  1. Öffnen Sie einen Content-Eintrag im Editor

  2. Suchen Sie das Feld Featured Image in der Seitenleiste

  3. Klicken Sie auf Select Image

  4. Wählen Sie aus der Medienbibliothek aus oder laden Sie hoch

  5. Klicken Sie auf Save

In benutzerdefinierten Feldern

Für Felder, die als Bild- oder Dateitypen konfiguriert sind, klicken Sie auf das Feld, um die Medienauswahl zu öffnen.

Medien in Templates anzeigen

Greifen Sie auf Medien-URLs aus Ihren Inhaltsdaten zu:

---
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 Bilder

Für responsive Bilder verwenden Sie Astros Image-Komponente mit externen URLs:

---
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. Wählen Sie die Datei(en) aus, die Sie löschen möchten

  2. Klicken Sie auf Delete

  3. Bestätigen Sie die Löschung

Medien-API

Greifen Sie programmgesteuert auf Medien über die Admin-API zu.

Eine Datei hochladen

Laden Sie Medien als mehrteilige Formulardaten hoch:

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

file=<binary file data>

Ein erfolgreicher Upload gibt das gespeicherte Medienelement zurück:

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

Die folgende Anfrage listet Medien unter einem Präfix auf:

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

Medien löschen

Die folgende Anfrage löscht eine gespeicherte Datei:

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

Medienanbieter

Zusätzlich zum lokalen Speicher unterstützt EmDash externe Medienanbieter für spezialisiertes Bild- und Video-Hosting. Medienanbieter erscheinen als Registerkarten im Medienauswahldialog und ermöglichen Redakteuren die Auswahl aus mehreren Quellen.

Verfügbare Anbieter

Cloudflare Images

Cloudflare Images bietet Bild-Hosting mit automatischer Optimierung, Größenänderung 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",
        }),
      ],
    }),
  ],
});

Funktionen:

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

Cloudflare Stream

Cloudflare Stream bietet Video-Hosting mit HLS/DASH adaptivem 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,
        }),
      ],
    }),
  ],
});

Funktionen:

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

Mehrere Anbieter verwenden

Sie können mehrere Anbieter konfigurieren. Jeder erscheint als Registerkarte im Medienauswahldialog:

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 Medienbibliothek (Registerkarte “Library”) ist immer zusätzlich zu allen konfigurierten Anbietern verfügbar.

Anbieter-Medien rendern

Verwenden Sie die Image-Komponente zum Rendern von Medien:

---
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 automatisch:

  • Erkennt den Anbieter aus dem gespeicherten Wert
  • Rendert ein optimiertes <img>-Element
  • Wendet anbieterspezifische Optimierungen an (z. B. Cloudflare Images-Transformationen)

MediaValue-Typ

Medienfelder speichern ein MediaValue-Objekt mit Anbieterinformationen:

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
}

Dies ermöglicht es EmDash, Medien unabhängig vom Hosting-Ort korrekt zu rendern.

Nächste Schritte