Médiathèque

À quoi sert la médiathèque ?

Quand vous construisez un site, vous accumulez vite des dizaines, voire des centaines de visuels : logos, photos d'équipe, illustrations de service, captures, vidéos de démonstration. La médiathèque centralise tout ça en un seul endroit. Vous uploadez une image une fois, puis vous la réutilisez partout : dans une page, un article, un cocon, le header, le footer.

Ce fonctionnement évite les doublons, allège votre serveur et garantit qu'une mise à jour visuelle se propage proprement. Si vous changez le logo dans la médiathèque, toutes les pages qui l'utilisent affichent automatiquement la nouvelle version après un rebuild.

Ajouter des médias

Il existe deux façons d'ajouter un fichier à votre médiathèque, et toutes les deux fonctionnent aussi bien.

1. Cliquer sur Médias dans la sidebar gauche, puis sur le bouton orange « Ajouter des médias » en haut à droite de la grille. Une fenêtre de sélection s'ouvre : choisissez un ou plusieurs fichiers depuis votre ordinateur.
2. Faire glisser directement vos fichiers depuis le bureau ou un dossier de votre ordinateur vers la grille de la médiathèque. La zone de dépôt se met en surbrillance, vous lâchez, et l'upload démarre immédiatement.

Pendant l'upload, une barre de progression apparaît au-dessus de chaque vignette en cours de transfert. Vous pouvez continuer à utiliser le CMS pendant ce temps : ouvrir une page, modifier un article, l'upload se poursuit en arrière-plan.

Formats acceptés et limites de taille

Le CMS accepte les formats suivants. Tout fichier déposé qui ne respecte pas ces règles est refusé avec un message clair.

Trouver une image dans la grille

Au fur et à mesure que la médiathèque se remplit, retrouver une image précise devient un enjeu. Le CMS propose deux outils, combinables, en haut de la grille.

• Recherche par nom. Tapez quelques lettres du nom du fichier dans la barre de recherche. La grille se filtre en temps réel. La recherche fonctionne aussi sur les fragments : taper « logo » trouvera logo-blanc.png, logo-couleur.svg et mon-logo-final.webp.
• Filtres par mois et année. Deux menus déroulants à côté de la recherche listent les mois et années où vous avez uploadé du contenu. Ces listes sont générées automatiquement à partir des dates d'upload réelles : pas besoin de remplir quoi que ce soit. Pratique pour retrouver « la photo que j'ai mise en mars ».

Vous pouvez cumuler les deux filtres : par exemple, recherche banner + mois Avril 2026 pour retrouver toutes les bannières uploadées ce mois-là.

Consulter et gérer un média

Cliquez sur n'importe quelle vignette de la grille pour ouvrir le drawer de détails, un panneau latéral qui glisse depuis la droite de l'écran. Ce drawer affiche toutes les informations utiles sur le fichier sélectionné.

Informations affichées

• Nom du fichier tel qu'il est stocké sur le serveur.
• Dimensions en pixels (largeur × hauteur), uniquement pour les images.
• Type MIME (image/jpeg, image/webp, video/mp4, etc.).
• Poids du fichier en Ko ou Mo.
• Date d'upload avec l'heure précise.
• URL publique du fichier, copiable en un clic.

Actions disponibles

Trois boutons en bas du drawer vous permettent d'agir sur le média.

1. Copier l'URL. Met l'adresse complète du fichier dans votre presse-papiers. Utile pour la coller dans un email, un Slack, une autre page du builder, ou pour vérifier rapidement qu'elle s'affiche bien dans un navigateur.
2. Ouvrir dans un nouvel onglet. Affiche le média en taille réelle dans un nouvel onglet. Pratique pour vérifier la qualité d'une grosse image avant de la publier.
3. Supprimer. Une confirmation vous est demandée. Une fois validée, le fichier est retiré de la médiathèque ET du serveur. Les pages qui utilisaient cette image afficheront une vignette cassée après le prochain rebuild.

Utiliser une image dans le builder visuel

L'intérêt de la médiathèque, c'est de pouvoir piocher dedans en quelques clics depuis n'importe quelle page. Le builder visuel intègre directement cette fonctionnalité.

1. Ouvrez une page dans le builder (Sidebar → Pages → cliquer sur une page).
2. Dans l'aperçu central, cliquez sur l'image que vous voulez remplacer. Elle est entourée d'un cadre orange pour indiquer qu'elle est sélectionnée.
3. Le panneau de droite affiche trois onglets : Contenu, Style, Avancé. Restez sur Contenu.
4. Dans la section Image, deux boutons apparaissent : « Choisir depuis la Médiathèque » et « Téléverser ».
5. Choisir depuis la Médiathèque ouvre une fenêtre modale avec la grille complète de vos médias. Vous filtrez, vous sélectionnez, vous validez. L'image se met à jour instantanément dans l'aperçu.
6. Téléverser ouvre directement le sélecteur de fichier de votre ordinateur. L'image uploadée est ajoutée à la médiathèque ET affectée à l'élément en cours.

Ce workflow vaut pour toutes les images du builder : visuels de section, illustrations d'article, photos d'équipe, icônes, fond d'en-tête.

La médiathèque du Cocon SEO

Le Cocon SEO dispose de sa propre médiathèque, séparée de la médiathèque générale. Elle est accessible via Cocon → Médiathèque dans la sidebar.

Cette bibliothèque dédiée existe pour une raison simple : les pages générées par cocon (par exemple une page « plombier à Lyon », « plombier à Marseille », etc.) ont besoin d'un pool d'images de qualité, thématiquement cohérentes, prêtes à être tirées au sort ou affectées en featured image.

Vous y déposez par exemple 30 photos de plombiers en intervention, et le CMS pioche dedans pour illustrer chaque page enfant générée. La même logique s'applique aux blocs « related sections » qui présentent d'autres pages du cocon avec un visuel d'aperçu.

L'interface est identique à celle de la médiathèque générale : grille, recherche, filtres, drawer de détails. Seules les images stockées ici sont visibles depuis le module Cocon. Pour la documentation détaillée du fonctionnement des pages générées, voir la page Cocon SEO.

Recherche IA d'image pour les articles

Le CMS sait aller chercher une image automatiquement quand vous créez un article de blog sans en avoir une sous la main. C'est utile pour les générations IA en série, ou simplement quand vous n'avez pas le temps de chasser une photo libre de droits.

Comment ça fonctionne

1. Vous créez un nouvel article (Sidebar → Blog → Ajouter un article).
2. Si le champ « Featured image » est laissé vide, le CMS lance automatiquement une recherche.
3. Il interroge tour à tour les banques d'images configurées : Unsplash, Pexels, Pixabay (selon ce qui est activé dans Réglages → API).
4. Il sélectionne la meilleure image en fonction du titre et des mots-clés de l'article.
5. Il télécharge l'image localement dans la médiathèque, puis l'affecte à l'article comme featured image.

Pourquoi télécharger localement plutôt que pointer vers l'URL distante ?

C'est une décision technique importante. Les URLs renvoyées par Unsplash, Pexels et Pixabay sont souvent signées et expirables : elles fonctionnent quelques heures ou quelques jours, puis cassent. Si on les utilisait directement, votre article afficherait une image cassée au bout de quelques semaines.

En téléchargeant l'image sur votre serveur, le CMS garantit qu'elle reste accessible aussi longtemps que vous le souhaitez. Elle devient aussi réutilisable depuis la médiathèque comme n'importe quelle autre image.

Régénérer une featured image

Si l'image trouvée automatiquement ne vous plaît pas, vous pouvez relancer la recherche depuis la fiche article : bouton « Régénérer l'image ». Le CMS interroge à nouveau les banques et propose une autre photo.

Qui peut utiliser la médiathèque ?

L'accès à la médiathèque dépend de votre rôle utilisateur. Voici la matrice des droits par défaut.

Un Administrateur peut restreindre l'accès à la médiathèque pour certains rôles via Réglages → Comptes → Matrice des droits. Par exemple, autoriser un client à voir et téléverser, mais pas à supprimer (le réglage personnalisé prime alors sur les défauts ci-dessus).

Bonnes pratiques en résumé

• Renommez vos fichiers avec des noms parlants avant l'upload.
• Compressez vos images (TinyPNG, Squoosh) pour rester sous 400 Ko par photo.
• Activez l'extension WebP Auto Converter pour un gain automatique de 30 à 50 % sur le poids.
• Uploadez une fois, réutilisez partout : pas de doublons.
• Avant de supprimer un média, vérifiez qu'il n'est pas utilisé ailleurs.
• Pour les cocons, alimentez la médiathèque dédiée avec 20 à 40 images thématiques.
• Configurez au moins une banque d'images (Unsplash recommandé) pour profiter de la recherche IA sur les articles.

Pour aller plus loin

La médiathèque s'intègre dans plusieurs autres modules. Pour comprendre comment elle s'articule avec eux :

• Builder visuel — utiliser les images dans la construction de pages.
• Blog — gestion des featured images et illustrations d'article.
• Cocon SEO — médiathèque dédiée aux pages générées.
• Extensions — activer le WebP Auto Converter pour optimiser automatiquement les images.
• Documentation technique de la médiathèque — détails API, stockage, hooks pour développeurs.