Medienbibliothek

EmDash enthält eine Medienbibliothek zur Verwaltung von Bildern, Dokumenten und anderen Dateien. Diese Anleitung 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 Vorschauen, Dateinamen und Upload-Daten an.

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

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 auf Upload in der Medienauswahl

3. Wählen Sie eine Datei von Ihrem Computer

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

Unterstützte Dateitypen

EmDash unterstützt gängige Web-Dateitypen:

Speicher-Backends

EmDash unterstützt mehrere Speicher-Backends. Konfigurieren Sie den Speicher in Ihrer Astro-Konfiguration:

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

Wie Uploads funktionieren

EmDash verwendet signierte URLs für sichere Uploads:

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

2. Der Server generiert eine signierte URL mit Ablaufdatum

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

4. Der Server speichert die Datei-Metadaten in der Datenbank

Dieser Ansatz hält große Dateien von Ihrem Anwendungsserver fern und ermöglicht direkte Uploads zum 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 Erstellen

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

Suche

Verwenden Sie das Suchfeld, um Dateien nach Namen zu finden. Die Suche findet auch teilweise Dateinamen.

Filter

Filtern Sie Medien nach:

• Typ - Bilder, Dokumente, Video, Audio
• Datum - Upload-Datumsbereich
• Ordner - Bestimmter Ordner

Medien in Inhalten verwenden

Im Rich-Text-Editor

1. Platzieren Sie den Cursor dort, wo Sie das Bild haben möchten

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

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

4. Geben Sie Alt-Text ein

5. Klicken Sie auf Einfügen

Als Featured Image

1. Öffnen Sie einen Inhaltseintrag im Editor

2. Finden Sie das Feld Featured Image in der Seitenleiste

3. Klicken Sie auf Bild auswählen

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

5. Klicken Sie auf Speichern

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 EmDash-Medienfelder verwenden Sie die Image-Komponente aus emdash/ui:

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

priority ist für das primäre Above-the-Fold-Bild. Es setzt loading="eager" und fetchpriority="high": loading steuert, ob das Laden verzögert wird, und fetchpriority gibt dem Browser einen Prioritätshinweis für die Anfrage.

Medien löschen

1. Wählen Sie die Datei(en), die Sie löschen möchten

2. Klicken Sie auf Löschen

3. Bestätigen Sie die Löschung

Medien-API

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

Eine Datei hochladen

Laden Sie Medien als Multipart-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

Medien-Provider

Zusätzlich zum lokalen Speicher unterstützt EmDash externe Medien-Provider für spezialisiertes Bild- und Video-Hosting. Medien-Provider erscheinen als Tabs in der Medienauswahl und ermöglichen es Redakteuren, aus mehreren Quellen zu wählen.

Verfügbare Provider

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

export default defineConfig({
  integrations: [
    emdash({
      // ... Datenbank-, Speicherkonfiguration
      mediaProviders: [
        cloudflareImages({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_IMAGES_TOKEN,
          // Optional: benutzerdefinierte Auslieferungsdomain
          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({
      // ... Datenbank-, Speicherkonfiguration
      mediaProviders: [
        cloudflareStream({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_STREAM_TOKEN,
          // Optional: Player-Einstellungen
          controls: true,
          autoplay: false,
          loop: false,
        }),
      ],
    }),
  ],
});

Mehrere Provider verwenden

Sie können mehrere Provider konfigurieren. Jeder erscheint als Tab in der Medienauswahl:

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 (Tab “Library”) ist immer verfügbar, zusammen mit allen konfigurierten Providern.

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

• Den Provider aus dem gespeicherten Wert
• Rendert ein optimiertes <img>-Element
• Wendet provider-spezifische Optimierungen an (z.B. Cloudflare Images Transformationen)

MediaValue-Typ

Medienfelder speichern ein MediaValue-Objekt mit Provider-Informationen:

interface MediaValue {
  provider?: string;    // Provider-ID, Standard ist "local"
  id: string;           // Provider-spezifische ID
  src?: string;         // Direkte URL (für lokale Medien oder einfache String-Werte)
  previewUrl?: string;  // Vorschau-URL für Admin-Anzeige (externe Provider)
  filename?: string;    // Originaler Dateiname
  mimeType?: string;    // MIME-Typ
  width?: number;       // Bild-/Videobreite
  height?: number;      // Bild-/Videohöhe
  alt?: string;         // Alt-Text
  meta?: Record<string, unknown>; // Provider-spezifische Metadaten
}

Dies ermöglicht EmDash, Medien korrekt zu rendern, unabhängig davon, wo sie gehostet werden.

Nächste Schritte

• Mit Inhalten arbeiten - Medien in Ihren Inhalten verwenden
• Blog erstellen - Bilder zu Blog-Posts hinzufügen
• Inhalte abfragen - Medien in Templates anzeigen