Bibliothèque de Médias

EmDash inclut une bibliothèque de médias pour gérer les images, documents et autres fichiers. Ce guide couvre le téléchargement, l’organisation et l’utilisation des médias dans votre contenu.

Accéder à la Bibliothèque de Médias

Ouvrez la bibliothèque de médias depuis la barre latérale d’administration en cliquant sur Media. La bibliothèque affiche tous les fichiers téléchargés avec des aperçus, noms de fichiers et dates de téléchargement.

Télécharger des Fichiers

Depuis la Bibliothèque de Médias

1. Cliquez sur Media dans la barre latérale d’administration

2. Cliquez sur Upload ou faites glisser des fichiers dans la zone de téléchargement

3. Sélectionnez un ou plusieurs fichiers depuis votre ordinateur

4. Attendez que les téléchargements soient terminés

Depuis l’Éditeur de Contenu

1. Dans l’éditeur de texte enrichi, cliquez sur le bouton image

2. Cliquez sur Upload dans le sélecteur de médias

3. Sélectionnez un fichier depuis votre ordinateur

4. Ajoutez un texte alternatif et cliquez sur Insert

Types de Fichiers Pris en Charge

EmDash prend en charge les types de fichiers web courants :

Backends de Stockage

EmDash prend en charge plusieurs backends de stockage. Configurez le stockage dans votre configuration 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",
      }),
    }),
  ],
});

Comment Fonctionnent les Téléchargements

EmDash utilise des URLs signées pour des téléchargements sécurisés :

1. Le client demande une URL de téléchargement depuis l’API

2. Le serveur génère une URL signée avec expiration

3. Le client télécharge directement vers le stockage en utilisant l’URL signée

4. Le serveur enregistre les métadonnées du fichier dans la base de données

Cette approche garde les gros fichiers hors de votre serveur d’applications et permet les téléchargements directs vers le stockage cloud.

Organiser les Médias

Dossiers

Créez des dossiers pour organiser vos médias :

1. Cliquez sur New Folder dans la bibliothèque de médias

2. Entrez un nom de dossier

3. Cliquez sur Create

4. Faites glisser les fichiers dans les dossiers pour les organiser

Recherche

Utilisez la zone de recherche pour trouver des fichiers par nom. La recherche correspond aux noms de fichiers partiels.

Filtres

Filtrez les médias par :

• Type - Images, Documents, Vidéo, Audio
• Date - Plage de dates de téléchargement
• Folder - Dossier spécifique

Utiliser les Médias dans le Contenu

Dans l’Éditeur de Texte Enrichi

1. Placez votre curseur où vous voulez l’image

2. Cliquez sur le bouton image dans la barre d’outils

3. Sélectionnez une image depuis la bibliothèque de médias ou téléchargez-en une nouvelle

4. Entrez le texte alternatif

5. Cliquez sur Insert

Comme Image Mise en Avant

1. Ouvrez une entrée de contenu dans l’éditeur

2. Trouvez le champ Featured Image dans la barre latérale

3. Cliquez sur Select Image

4. Choisissez depuis la bibliothèque de médias ou téléchargez

5. Cliquez sur Save

Dans les Champs Personnalisés

Pour les champs configurés comme types d’image ou de fichier, cliquez sur le champ pour ouvrir le sélecteur de médias.

Afficher les Médias dans les Templates

Accédez aux URLs des médias depuis vos données de contenu :

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

Images Responsives

Pour les images responsives, utilisez le composant Image d’Astro avec des URLs externes :

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

Supprimer des Médias

1. Sélectionnez le(s) fichier(s) que vous souhaitez supprimer

2. Cliquez sur Delete

3. Confirmez la suppression

API Médias

Accédez aux médias par programmation en utilisant l’API d’administration.

Télécharger un Fichier

Téléchargez des médias en tant que données de formulaire multipart :

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

file=<binary file data>

Un téléchargement réussi retourne l’élément média stocké :

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

Lister les Médias

La requête suivante liste les médias sous un préfixe :

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

Supprimer des Médias

La requête suivante supprime un fichier stocké :

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

Fournisseurs de Médias

En plus du stockage local, EmDash prend en charge les fournisseurs de médias externes pour l’hébergement spécialisé d’images et de vidéos. Les fournisseurs de médias apparaissent comme des onglets dans le sélecteur de médias, permettant aux éditeurs de choisir parmi plusieurs sources.

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

Utiliser Plusieurs Fournisseurs

Vous pouvez configurer plusieurs fournisseurs. Chacun apparaît comme un onglet dans le sélecteur de médias :

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 bibliothèque de médias locale (onglet “Library”) est toujours disponible aux côtés de tous les fournisseurs configurés.

Rendu des Médias de Fournisseurs

Utilisez le composant Image pour rendre les médias :

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

Le composant automatiquement :

• Détecte le fournisseur depuis la valeur stockée
• Rend un élément <img> optimisé
• Applique les optimisations spécifiques au fournisseur (par ex., transformations Cloudflare Images)

Type MediaValue

Les champs médias stockent un objet MediaValue contenant les informations du fournisseur :

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
}

Cela permet à EmDash de rendre les médias correctement quel que soit leur emplacement d’hébergement.

Étapes Suivantes

• Travailler avec le Contenu - Utiliser les médias dans votre contenu
• Créer un Blog - Ajouter des images aux articles de blog
• Interroger le Contenu - Afficher les médias dans les templates