E EmDash CMS Everything Guides, use cases, plugins, templates
Français

Médiathèque

Sur cette page

EmDash inclut une médiathèque pour gérer 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 médiathèque

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

Médiathèque EmDash affichant une grille d'images avec bouton de téléversement

Téléverser des fichiers

Depuis la médiathèque

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

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

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

  4. Attendez la fin des téléversements

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

CatégorieExtensions
Images.jpg, .jpeg, .png, .gif, .webp, .avif, .svg
Documents.pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx
Vidéo.mp4, .webm, .mov
Audio.mp3, .wav, .ogg

Backends de stockage

EmDash prend en charge plusieurs backends de stockage. Configurez le stockage dans votre configuration Astro :

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

Les fichiers sont stockés dans le répertoire ./uploads. Adapté au développement et aux déploiements sur serveur unique.

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

Nécessite un bucket R2 configuré dans wrangler.jsonc :

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

Fonctionne avec Cloudflare R2 (via l’API S3), MinIO et d’autres services compatibles S3.

Fonctionnement des téléversements

EmDash utilise des URL 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 via cette URL signée

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

Cette approche évite que les fichiers volumineux passent par 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 médiathèque

  2. Saisissez un nom de dossier

  3. Cliquez sur Create

  4. Glissez-déposez les fichiers dans les dossiers pour les organiser

Recherche

Utilisez la zone de recherche pour trouver des fichiers par nom. La recherche fonctionne avec des correspondances partielles.

Filtres

Filtrez les médias par :

  • Type — Images, Documents, Vidéo, Audio
  • Date — Plage de dates de téléversement
  • Dossier — Dossier spécifique

Utiliser les médias dans le contenu

Dans l’éditeur de texte enrichi

  1. Placez votre curseur à l’endroit souhaité pour l’image

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

  3. Sélectionnez une image dans la médiathèque ou téléversez-en une nouvelle

  4. Saisissez le texte alternatif

  5. Cliquez sur Insert

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 Select Image

  4. Choisissez dans la médiathèque ou téléversez un fichier

  5. Cliquez sur Save

Dans les champs personnalisés

Pour les champs configurés comme type 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 URL des médias depuis les données de votre 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 adaptatives

Pour des images adaptatives, utilisez le composant Image d’Astro avec des URL 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 ou les fichiers à supprimer

  2. Cliquez sur Delete

  3. Confirmez la suppression

API des médias

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

Téléverser un fichier

Téléversez des médias sous forme de données multipart :

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

file=<binary file data>

Réponse :

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

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

Supprimer des médias

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 des fournisseurs de médias externes pour l’hébergement spécialisé d’images et de vidéos. Les fournisseurs apparaissent sous forme d’onglets dans le sélecteur de médias, permettant aux éditeurs de choisir parmi plusieurs sources.

Fournisseurs disponibles

Cloudflare Images

Cloudflare Images fournit un hébergement d’images avec optimisation automatique, redimensionnement et conversion de format.

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 et stockage
      mediaProviders: [
        cloudflareImages({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_IMAGES_TOKEN,
          // Optionnel : domaine de diffusion personnalisé
          deliveryDomain: "images.example.com",
        }),
      ],
    }),
  ],
});

Fonctionnalités :

  • Parcourir et téléverser des images directement depuis l’admin
  • Optimisation automatique des images et conversion de format
  • Transformations par URL (redimensionnement, recadrage, format)
  • Variantes flexibles pour les images adaptatives

Cloudflare Stream

Cloudflare Stream fournit un hébergement vidéo avec streaming adaptatif HLS/DASH.

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

Fonctionnalités :

  • Parcourir, rechercher et téléverser des vidéos depuis l’admin
  • Streaming adaptatif HLS et DASH
  • Génération automatique de vignettes
  • Téléversement direct pour les fichiers volumineux

Utiliser plusieurs fournisseurs

Vous pouvez configurer plusieurs fournisseurs. Chacun apparaît sous forme d’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 médiathèque locale (onglet « Library ») reste toujours disponible en plus de tout fournisseur configuré.

Afficher les médias du fournisseur

Utilisez le composant Image pour afficher 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 effectue automatiquement :

  • La détection du fournisseur à partir de la valeur stockée
  • Le rendu d’un élément <img> optimisé
  • L’application des optimisations spécifiques au fournisseur (ex. transformations Cloudflare Images)

Type MediaValue

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

interface MediaValue {
  provider?: string;    // ID du fournisseur, "local" par défaut
  id: string;           // ID spécifique au fournisseur
  src?: string;         // URL directe (pour les médias locaux ou les données héritées)
  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 de l'image/vidéo
  height?: number;      // Hauteur de l'image/vidéo
  alt?: string;         // Texte alternatif
  meta?: Record<string, unknown>; // Métadonnées spécifiques au fournisseur
}

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

Prochaines étapes