Médiathèque

Présentation

La médiathèque de Fatplant est un gestionnaire de fichiers intégré à l’administration. Elle centralise tous les médias utilisés dans le contenu : images, fichiers audio, documents PDF.

Chaque fichier uploadé est stocké sur le serveur et exposé via l’API médias. Les images font l’objet d’un traitement automatique pour générer des variantes adaptées aux différents contextes d’affichage.

Upload

Pour uploader un fichier :

1. Dans le menu gauche, cliquez sur Médias.
2. Cliquez sur + Uploader ou glissez-déposez vos fichiers.
3. Plusieurs fichiers peuvent être uploadés simultanément.

Formats acceptés par défaut :

Type	Formats
Images	JPEG, PNG, WebP, GIF
Audio	MP3, OGG, M4A
Documents	PDF

La taille maximale par fichier est configurable via la variable UPLOAD_MAX_SIZE (par défaut 50 Mo).

Variantes responsive

Après l’upload d’une image, Fatplant génère automatiquement plusieurs variantes redimensionnées pour optimiser les performances et l’affichage sur tous les appareils :

Variante	Largeur maximale	Usage
thumbnail	150 px	Miniatures dans l’admin
small	480 px	Mobile
medium	960 px	Tablette
large	1440 px	Desktop
original	Taille d’origine	Téléchargement

Le format WebP est utilisé pour toutes les variantes générées si le serveur dispose du support nécessaire. Cela réduit significativement la taille des fichiers tout en maintenant la qualité visuelle.

Dans le frontend SSR, l’élément <img> est rendu avec l’attribut srcset pour laisser le navigateur choisir la variante la plus appropriée :

<img
  src="/uploads/mon-image-medium.webp"
  srcset="
    /uploads/mon-image-small.webp 480w,
    /uploads/mon-image-medium.webp 960w,
    /uploads/mon-image-large.webp 1440w
  "
  sizes="(max-width: 480px) 480px, (max-width: 960px) 960px, 1440px"
  alt="Description de l'image"
/>

Recadrage (crop)

Chaque image peut être recadrée manuellement dans l’administration pour définir une zone d’intérêt spécifique. Le recadrage est non-destructif : l’image originale est conservée et les variantes sont régénérées à partir des coordonnées de crop.

Le recadrage est particulièrement utile pour les images de couverture, où la zone à mettre en valeur varie selon le format d’affichage (paysage, portrait, carré).

Organisation en dossiers

La médiathèque supporte l’organisation des fichiers en dossiers. Vous pouvez créer une hiérarchie pour regrouper les médias par sujet, date ou type :

uploads/
├── 2026/
│   ├── 01-janvier/
│   └── 02-fevrier/
├── couvertures/
└── logos/

La navigation dans les dossiers est disponible dans l’interface d’administration.

Métadonnées

Chaque fichier média dispose des métadonnées suivantes :

Champ	Description
filename	Nom du fichier original
mimeType	Type MIME
size	Taille en octets
width / height	Dimensions (images uniquement)
alt	Texte alternatif (pour l’accessibilité)
caption	Légende affichée sous l’image
credit	Crédit photographique

L’API médias

# Liste des médias
GET /api/public/media

# Un média par ID
GET /api/public/media/42

# Filtrer par type MIME
GET /api/public/media?mimeType=image/jpeg

# Recherche par nom
GET /api/public/media?search=logo

Réponse exemple :

{
  "id": 42,
  "filename": "photo-redaction.jpg",
  "mimeType": "image/jpeg",
  "alt": "La rédaction en réunion",
  "variants": {
    "thumbnail": "/uploads/photo-redaction-thumbnail.webp",
    "small": "/uploads/photo-redaction-small.webp",
    "medium": "/uploads/photo-redaction-medium.webp",
    "large": "/uploads/photo-redaction-large.webp",
    "original": "/uploads/photo-redaction.jpg"
  }
}

Utilisation dans le page builder

Dans le page builder, le module image fait référence à un média par son identifiant (mediaId). L’API retourne automatiquement les variantes correspondantes lors du rendu.