Skip to main content

Gérer les images et la bibliothèque média

🖼️ Chapitre 11 — Gérer les images et la bibliothèque média

Toutes les images, vidéos et documents que vous utilisez dans votre site passent par la bibliothèque média. C'est un lieu central : vous uploadez une image une fois, vous la réutilisez partout.

🚪 Accéder à la bibliothèque

Trois entrées possibles :

  1. Depuis le tableau de bord — Cliquez sur la carte « Bibliothèque médias ».
  2. Depuis l'éditeur — Onglet Médias en haut de la colonne gauche.
  3. Depuis un slot image — Bouton « Choisir une image » qui ouvre la bibliothèque en modale.

📂 Comprendre l'organisation

La bibliothèque est par site. Si vous gérez plusieurs sites, chaque site a sa propre médiathèque indépendante.

Au sein d'un site, les médias sont classés par type :

Type

Contenu

🖼️

Image

JPG, PNG, WebP, SVG, GIF

🎬

Vidéo

MP4, WebM

📄

Document

PDF, DOC, autres

📤 Uploader un nouveau média

Méthode A — Bouton « Envoyer un fichier »

  1. Dans la toolbar de la bibliothèque, cliquez sur « Envoyer un fichier ».
  2. Sélectionnez un ou plusieurs fichiers depuis votre ordinateur.
  3. Le ou les fichiers sont uploadés. Une vignette apparaît dans la grille.

Méthode B — Glisser-déposer

  1. Faites glisser une image depuis votre Finder / Explorateur.
  2. Déposez-la directement sur la grille de la bibliothèque.
  3. L'upload démarre automatiquement.

Méthode C — Pendant l'édition d'un slot image

  1. Vous êtes sur l'inspecteur d'un slot image.
  2. Cliquez sur « Choisir une image ».
  3. La bibliothèque s'ouvre. En haut, un bouton « Envoyer ».
  4. Uploadez sans quitter votre flux d'édition.

💡 Format recommandé — Pour les photos, préférez WebP (taille de fichier 30-50 % plus légère que JPG à qualité égale). Le module accepte les WebP nativement.

🔍 Trouver un média existant

Au-dessus de la grille, plusieurs filtres :

  • 🔎 Recherche — par label, ref ou tag.
  • 📂 Type — images / vidéos / documents.
  • 🌐 Site — si vous gérez plusieurs sites.

La grille se filtre instantanément. Scroll infini en bas pour charger les médias suivants (50 par page).

✏️ Modifier les métadonnées d'un média

Cliquez sur une vignette. Une modale d'édition s'ouvre, organisée en deux colonnes :

Colonne gauche — Aperçu et utilisation

  • 📷 Aperçu de l'image en taille réelle.
  • 📊 Utilisé sur N bloc(s) — liste des pages qui référencent ce média.
  • 📜 Historique — repliable, montre les modifications passées.

Colonne droite — Champs éditables

Champ

Description

Référence

Identifiant court réutilisable dans les shortcodes (

{{media:ref=hero-1.url}}

).

Label

Nom d'affichage dans la bibliothèque.

Texte alternatif (canonique)

L'attribut

alt

par défaut. Important pour le SEO et l'accessibilité.

Tags

Mots-clés pour retrouver le média dans la recherche.

Traductions alt par langue

Repliable. Un champ par locale pour traduire le texte alternatif.

✅ Bonne pratique SEO — Remplissez toujours le texte alternatif. C'est ce qui apparaît si l'image ne se charge pas, ce que lit un lecteur d'écran, et ce que Google utilise pour comprendre vos images.

📐 Les variantes générées automatiquement

À chaque upload d'image, le module crée automatiquement trois tailles en plus de l'original :

Variante

Dimensions

Usage typique

thumb

200 × 200 px

Vignettes, galerie

card

640 × 480 px

Cartes article, mosaïques

wide

1600 × 1200 px

Hero pleine largeur

original

Dimensions natives

Téléchargement, print

Les variantes sont générées à la demande (lazy) : la première fois qu'une page demande la variante card, elle est créée et mise en cache.

🗑️ Supprimer un média

  1. Ouvrez la modale d'édition (clic sur la vignette).
  2. En bas à droite, cliquez sur « Envoyer à la corbeille ».

ℹ️ Soft-delete — Le média n'est pas effacé du disque. Il est juste marqué comme inactif et n'apparaît plus dans la grille. Vos pages qui l'utilisent continuent à fonctionner.

⚠️ Si le média est utilisé — La suppression est refusée par défaut. Le module vous montre la liste des pages qui s'appuient dessus. Soit vous remplacez l'image sur ces pages, soit vous forcez la suppression (bouton supplémentaire) — mais alors les pages affichent l'image cassée.

🔄 Rescanner un dossier de médias

Si vous avez ajouté des fichiers sans passer par le Studio (FTP, SCP, ou via Dolibarr Website lui-même), ils n'apparaissent pas dans la bibliothèque.

Pour les détecter :

  1. Dans la toolbar de la bibliothèque, cliquez sur « ⟳ Rescanner ».
  2. Le module parcourt le dossier physique du site.
  3. Les fichiers absents de la bibliothèque sont ajoutés.

💡 Auto-rescan — Le module fait ce rescan automatiquement toutes les 5 minutes au maximum quand vous chargez la bibliothèque. Le bouton sert juste à forcer un rescan immédiat.

🔗 Insérer un média dans un slot richtext

  1. Vous éditez un slot de type richtext.
  2. Au-dessus de la barre d'outils CKEditor, un bouton « Insérer un média ».
  3. Cliquez. La bibliothèque s'ouvre en modale.
  4. Sélectionnez ou uploadez une image.
  5. Le module insère :
    • Une balise <img src alt> si vous avez choisi une image,
    • Un lien <a href> avec le label si vous avez choisi un document.

📋 Récapitulatif

✅ Vous savez maintenant :

  • Accéder à la bibliothèque depuis trois entrées différentes.
  • Uploader des médias par bouton, glisser-déposer ou pendant l'édition d'un slot.
  • Filtrer la bibliothèque par recherche, type ou site.
  • Modifier les métadonnées (label, alt canonique + traductions, tags).
  • Comprendre les variantes générées (thumb, card, wide).
  • Supprimer un média en respectant ses utilisations.
  • Rescanner pour récupérer des fichiers ajoutés hors du Studio.
  • Insérer un média au curseur dans un richtext.

Au prochain chapitre, on aborde le workflow de publication — la mécanique qui sépare votre travail en cours de la version visible publiquement.

Back to top