Médiathèque

La Médiathèque stocke des images, documents, vidéos et fichiers audio réutilisables. Les éditeurs peuvent téléverser des fichiers une fois, les sélectionner depuis les champs de contenu et le Portable Text, et voir quelles entrées de contenu font référence à un élément média local.

Ouvrir la Médiathèque

Sélectionnez Media dans la barre latérale d’administration. La bibliothèque principale contient les dossiers et les fichiers qui n’ont pas été placés dans un dossier. Sélectionnez un dossier pour parcourir ses fichiers, ou basculez entre les vues grille et liste.

Si le site a des fournisseurs de médias externes, chaque fournisseur apparaît comme une autre source. Les capacités des fournisseurs varient : une source peut prendre en charge la navigation et la sélection mais pas les dossiers, l’édition d’image locale ou la suppression.

Téléverser des fichiers

Téléverser depuis la bibliothèque

Les téléversements commencent dès que des fichiers sont ajoutés. Les nouveaux fichiers locaux entrent dans la bibliothèque principale, même si un autre dossier était ouvert avant le téléversement.

Téléverser en modifiant le contenu

Les champs image, fichier, galerie et image Portable Text utilisent un sélecteur de médias. Ouvrez le champ, sélectionnez Upload files, puis choisissez ou déposez des fichiers. Un téléversement terminé fait partie de la sélection actuelle ; les téléversements en échec restent visibles pour que vous puissiez les réessayer ou les supprimer.

Pour une galerie, examinez Selected media et utilisez les commandes de déplacement pour définir l’ordre avant de sélectionner Add images. Pour une image ou un fichier unique, sélectionnez Select ou Insert image une fois le téléversement terminé.

Fichiers acceptés et limite de taille

La Médiathèque locale accepte ces groupes de fichiers par défaut :

• images PNG, JPEG, GIF, WebP et AVIF ;
• formats vidéo courants tels que MP4, WebM et vidéo QuickTime ;
• formats audio courants tels que MP3, WAV et audio Ogg ; et
• documents PDF.

SVG est exclu de la liste de téléversement par défaut car les fichiers SVG peuvent contenir du contenu actif. Un champ image ou fichier peut définir sa propre liste de types de fichiers acceptés lorsque le modèle de contenu nécessite une sélection plus étroite ou un autre format. EmDash identifie chaque fichier par son type de média, une étiquette telle que image/png ou application/pdf, et revérifie la liste du champ lors de l’enregistrement du contenu. Modifier le sélecteur de fichiers du navigateur ne contourne pas cette vérification serveur.

Le maximum par défaut est de 50 Mo par fichier. Les développeurs du site peuvent le modifier avec maxUploadSize. Un fournisseur peut imposer une limite supplémentaire de format ou de taille et signalera cet échec dans la ligne de téléversement.

Trouver et organiser les fichiers

La recherche correspond aux noms de fichiers partiels. Le filtre de type limite les résultats aux images, documents, vidéos ou audio. Une recherche par nom de fichier couvre toute la bibliothèque locale, même lorsqu’un dossier est ouvert ; parcourir un dossier sans recherche n’affiche que les fichiers assignés à ce dossier.

Les éditeurs peuvent sélectionner Add new folder dans la bibliothèque principale. Déplacez un fichier local en glissant sa carte ou sa ligne sur un dossier visible, ou ouvrez le fichier, changez Location et sélectionnez Save. Utilisez Main library comme emplacement pour retirer un fichier de son dossier actuel.

Les auteurs peuvent déplacer les fichiers locaux qu’ils ont téléversés. Les éditeurs peuvent déplacer n’importe quel fichier local. Les éléments de fournisseurs externes ne peuvent pas être assignés aux dossiers de la Médiathèque.

Supprimer un dossier ramène ses fichiers dans la bibliothèque principale. Cela ne supprime pas les fichiers, ne change pas leurs URL et ne retire pas leurs références de contenu.

Sélectionner des médias pour le contenu

Images Portable Text

Placez le curseur dans un champ Portable Text, ouvrez le menu de blocs et sélectionnez Image. Choisissez ou téléversez une image, puis sélectionnez Insert image. Sélectionnez ensuite le bloc image pour ajouter un texte alternatif, une légende, des dimensions d’affichage et un alignement.

Champs image et fichier

Sélectionnez l’action du champ, telle que Select image ou Select file, puis choisissez un élément et confirmez la sélection. Les règles de type MIME d’un champ limitent les éléments de bibliothèque et les sources de médias qui apparaissent.

Le champ featured_image du modèle de blog stocke la valeur média sélectionnée avec l’article. Enregistrer l’entrée enregistre cette référence dans le brouillon ; publier la rend disponible pour les requêtes de contenu publiques.

Champs galerie

Sélectionnez une ou plusieurs images, organisez-les sous Selected media et confirmez. Une galerie conserve son propre ordre ainsi que le texte alternatif et la légende par image, même lorsque plusieurs positions font référence à des éléments de la Médiathèque.

Modifier une image utilisée dans le contenu

Une image locale sélectionnée propose des actions à portées différentes :

• Replace choisit un autre élément de la Médiathèque pour ce champ, ce bloc ou cette position de galerie. Les autres entrées qui utilisent l’élément d’origine ne changent pas.
• Edit asset ouvre l’élément sous-jacent de la Médiathèque. Les modifications de métadonnées et les modifications d’image destructives peuvent affecter d’autres utilisations de cet élément.
• Remove efface cette référence de contenu. L’élément de la Médiathèque reste disponible.

Lorsque Edit asset crée une copie recadrée, le sélecteur choisit la nouvelle copie pour l’utilisation actuelle. Les images Portable Text et de galerie conservent le texte alternatif, la légende, la mise en page et la position de cette utilisation. Lorsque Edit asset remplace l’original, l’ID média reste le même, de sorte que chaque utilisation de cet élément reçoit l’image modifiée.

Les images de fournisseurs externes et les champs fichier offrent Replace et Remove mais n’ouvrent pas l’éditeur d’actifs local.

Remplacer une image locale

Replace image téléverse de nouveaux octets derrière un élément existant de la Médiathèque. Utilisez-le lorsque chaque endroit qui fait référence à l’élément doit afficher une nouvelle version de l’image.

L’action est disponible pour les éléments JPEG, PNG et WebP prêts. Les auteurs peuvent remplacer les images qu’ils ont téléversées ; les éditeurs peuvent remplacer n’importe quelle image locale.

EmDash conserve l’ID média, le nom de fichier, l’URL, le texte alternatif, la légende et le dossier. Les références de contenu existantes continuent donc de fonctionner et affichent le remplacement. Le remplacement efface le point focal enregistré car ses coordonnées peuvent ne pas décrire la nouvelle image.

Utilisez plutôt Replace dans l’éditeur de contenu lorsque seul un champ ou un bloc image doit changer.

Définir un point focal

Un point focal marque la partie d’une image qui doit rester visible lorsqu’une mise en page recadre l’image pour remplir un carré, un paysage, un portrait ou une autre forme fixe.

Sélectionnez Reset pour supprimer le point personnalisé. Lorsque vous choisissez une image pour un champ ou une galerie, EmDash copie le point focal actuel de l’actif dans cette valeur de contenu. Le contenu qui utilise déjà l’image conserve son point stocké jusqu’à ce que vous sélectionniez à nouveau l’image. Ouvrir Edit asset depuis un champ de contenu met à jour cette utilisation actuelle avec le point que vous enregistrez.

Recadrer une image locale

Le recadrage est disponible pour les images JPEG, PNG et WebP prêtes stockées par EmDash. Les images de fournisseurs externes ne peuvent pas être recadrées dans l’éditeur d’actifs local.

Replace original n’est disponible qu’avec le rapport d’aspect Original. Utilisez Create cropped copy pour Freeform et les autres rapports. Une copie recadrée reste dans le même dossier que sa source et reçoit un nom de fichier unique.

Recadrer un WebP animé crée un WebP fixe. Le résultat recadré ne conserve pas l’animation.

Voir où un fichier est utilisé

Ouvrez un fichier local et sélectionnez Used in pour lister les entrées de contenu et les paramètres du site qui y font référence. Chaque résultat de contenu nomme la collection et les champs qui contiennent la référence et peut ouvrir l’entrée pour l’édition. Les entrées à la corbeille sont identifiées dans la liste. Un résultat Site Settings nomme les paramètres qui sélectionnent le fichier : Logo, Favicon ou Default Social Image.

Used in vérifie ces références :

• champs image et fichier
• champs image dans les répéteurs
• champs image, fichier et Portable Text dans les champs blocks
• blocs image et galerie dans les champs Portable Text
• le logo du site, le favicon et l’image sociale par défaut

Lorsque la couverture d’utilisation est complète et que le fichier n’a aucune de ces références, la liste affiche No tracked references found. Jusqu’à ce que la couverture soit complète, une liste vide affiche No usage to show yet.

Le suivi d’utilisation des médias doit être actif avant que les résultats de contenu puissent être complets. Les paramètres du site sont listés que le suivi soit actif ou non. Un administrateur active le suivi une fois pour le site :

Une fois activé, le suivi d’utilisation des médias ne peut pas être désactivé. Les nouvelles modifications de contenu sont suivies après l’activation de la capture ; l’analyse en arrière-plan ajoute les références des entrées qui existaient déjà.

Si la vue Used in indique que l’indexation est en cours, obsolète, partielle ou en échec, traitez ses résultats comme incomplets. Un administrateur peut revenir à Media usage tracking pour le statut actuel et les conseils de récupération.

Afficher une image dans un template

Les champs image renvoient une valeur média plutôt qu’une URL simple. Affichez cette valeur avec Image de emdash/ui afin que les images locales et celles des fournisseurs utilisent l’URL, les dimensions, le point focal, les variantes responsives et le placeholder basse qualité appropriés :

---
import { getEmDashEntry } from "emdash";
import { Image } from "emdash/ui";

const { entry: post, error } = await getEmDashEntry("posts", Astro.params.slug);
if (error) return new Response("Unable to load post", { status: 500 });
if (!post) return Astro.redirect("/404");
---

{post.data.featured_image && (
  <Image image={post.data.featured_image} width={1200} height={675} priority />
)}

Utilisez priority uniquement pour l’image principale visible en haut de la page. Cela demande un chargement eager et donne au navigateur une indication de priorité de récupération élevée. Les autres images doivent conserver le chargement différé par défaut du composant.

Si le champ a une contrepartie en mode sombre, Image affiche les deux sources et en sélectionne une selon le schéma de couleurs du visiteur. Voir Images en mode sombre pour la configuration du champ et du template.

Le template reçoit les métadonnées média stockées avec la référence de contenu sans autre requête à la Médiathèque. Si une intégration personnalisée nécessite les dernières métadonnées du fournisseur, demandez cet élément explicitement et évitez une recherche fournisseur par image sur une page de collection. La référence des types de champs décrit les valeurs fichier et image stockées.

Configurer le stockage et les fournisseurs

La bibliothèque locale stocke les fichiers via l’adaptateur de stockage configuré du site. Les sites Node.js peuvent utiliser le disque local ou un stockage compatible S3 ; les sites Cloudflare utilisent souvent une liaison R2. L’adaptateur décide où les octets sont stockés, tandis que la Médiathèque conserve le même flux de rédaction. Voir Stockage des médias pour la configuration et les exigences de persistance en production.

Cloudflare Images et Cloudflare Stream peuvent être enregistrés comme fournisseurs de médias externes. Ils apparaissent comme sources dans le sélecteur, et Image comprend les valeurs d’image basées sur le fournisseur. Les éléments du fournisseur restent gérés par ce service, de sorte que les dossiers locaux, points focaux, recadrage et remplacement sont indisponibles pour ces éléments dans l’éditeur d’actifs EmDash.

Supprimer des médias en toute sécurité

Ouvrez un fichier dans la Médiathèque, sélectionnez Delete et confirmez la suppression permanente. Les auteurs peuvent supprimer les fichiers locaux qu’ils ont téléversés ; les éditeurs peuvent supprimer n’importe quel fichier local. Un élément de fournisseur n’est supprimé chez son fournisseur que lorsque cette source expose la suppression et que l’utilisateur actuel a l’autorisation.

Pour les téléversements automatisés et la gestion des médias, voir la référence des endpoints média ou les commandes média de la CLI. Continuez avec Travailler avec le contenu pour publier des entrées qui utilisent les médias sélectionnés.