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éversement, 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 admin en cliquant sur Media. La bibliothèque affiche tous les fichiers téléversés avec des aperçus, noms de fichiers et dates de téléversement.

Téléverser des fichiers

Depuis la bibliothèque de médias

1. Cliquez sur Media dans la barre latérale admin

2. Cliquez sur Upload ou glissez des fichiers sur la zone de téléversement

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

4. Attendez que les téléversements se terminent

Depuis l’éditeur de contenu

1. Dans l’éditeur de texte riche, 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 Insérer

Types de fichiers supportés

EmDash supporte les types de fichiers web courants :

Backends de stockage

EmDash supporte 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éversements

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

1. Le client demande une URL de téléversement à l’API

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

3. Le client téléverse 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 fichiers volumineux hors de votre serveur d’application et permet des téléversements 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 Créer

4. Glissez des fichiers dans les dossiers pour les organiser

Recherche

Utilisez le champ 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 date de téléversement
• Dossier - Dossier spécifique

Utiliser les médias dans le contenu

Dans l’éditeur de texte riche

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

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

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

4. Entrez un texte alternatif

5. Cliquez sur Insérer

Comme image à la une

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

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

3. Cliquez sur Sélectionner une image

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

5. Cliquez sur Enregistrer

Dans les champs personnalisés

Pour les champs configurés comme types image ou 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 champs médias EmDash, utilisez le composant Image de 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 est pour l’image principale au-dessus de la ligne de flottaison. Il définit loading="eager" et fetchpriority="high" : loading contrôle si le chargement est différé, et fetchpriority donne au navigateur un indice de priorité pour la requête.

Supprimer des médias

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

2. Cliquez sur Supprimer

3. Confirmez la suppression

API des médias

Accédez aux médias programmatiquement via l’API d’administration.

Téléverser un fichier

Téléversez des médias en 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éversement 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 supporte des 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({
      // ... configuration base de données, stockage
      mediaProviders: [
        cloudflareImages({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_IMAGES_TOKEN,
          // Optionnel : domaine de livraison personnalisé
          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({
      // ... configuration base de données, stockage
      mediaProviders: [
        cloudflareStream({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_STREAM_TOKEN,
          // Optionnel : paramètres du lecteur
          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 tout fournisseur configuré.

Rendre les médias du fournisseur

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 à partir de la valeur stockée
• Rend un élément <img> optimisé
• Applique les optimisations spécifiques au fournisseur (ex. transformations Cloudflare Images)

Type MediaValue

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

interface MediaValue {
  provider?: string;    // ID du fournisseur, par défaut "local"
  id: string;           // ID spécifique au fournisseur
  src?: string;         // URL directe (pour les médias locaux ou les valeurs chaîne simple)
  previewUrl?: string;  // URL d'aperçu pour l'affichage admin (fournisseurs externes)
  filename?: string;    // Nom de fichier original
  mimeType?: string;    // Type MIME
  width?: number;       // Largeur image/vidéo
  height?: number;      // Hauteur image/vidéo
  alt?: string;         // Texte alternatif
  meta?: Record<string, unknown>; // Métadonnées spécifiques au fournisseur
}

Cela permet à EmDash de rendre les médias correctement indépendamment de l’endroit où ils sont hébergés.

Prochaines étapes

• 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