Skip to main content

Chapitre 11 — 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 danssur votre site passenttransitent par la bibliothèque média.média. C'estIl s'agit d'un lieuemplacement central : vous uploadeztéléversez un fichier une imageseule unefois fois,et le réutilisez partout où vous laen réutilisezavez partout.besoin.

🚪

Accéder à la bibliothèque

Trois entrées sont possibles :

  1. Depuis le tableau de bord —: Cliquezcliquez sur la carte « Bibliothèque médias ».
  2. Depuis l'éditeur —: Ongletsélectionnez l'onglet Médias en haut de la colonne gauche.
  3. Depuis un slot image —: Boutoncliquez sur le bouton « Choisir une image » qui ouvre la bibliothèque endans modale.une fenêtre.

L'organisation

📂de Comprendrela l'organisation

bibliothèque

La bibliothèque est gérée par site.site. Si vous gérezadministrez plusieurs sites, chaquechacun sitedispose ade sa propre médiathèque indépendante.

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

Type

ContenuFormats acceptés

🖼️

Image

JPG, PNG, WebP, SVG, GIF

🎬

Vidéo

MP4, WebM

📄

Document

PDF, DOC,DOC et autres formats bureautiques

📤 Uploader

Téléverser un nouveau média

Méthode A — Bouton « Envoyer un fichier »

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

Méthode B — Glisser-déposer

  1. Faites glisser une image depuis votre Finderexplorateur /de Explorateur.fichiers.
  2. Déposez-la directement sur la grille de la bibliothèque.
  3. L'uploadLe téléversement démarre automatiquement.

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

  1. Vous êteséditez sur l'inspecteur d'un slot image.de type image dans l'inspecteur.
  2. Cliquez sur « Choisir une image ».
  3. La bibliothèque s'ouvre. En haut, unUn bouton «Envoyer Envoyerest ».disponible en haut.
  4. UploadezTéléversez sans quitterinterrompre votre flux d'édition.

💡Conseil Format recommandé— — Pour les photos,photographies, préférezle format WebP (tailleest derecommandé. Il offre un fichier 30-30 à 50 % plus légèreléger quequ'un JPG à qualité égale).équivalente. Le module accepte lesce WebPformat nativement.

🔍 Trouver

Retrouver un média existant

Au-dessus de la grille, plusieurs filtres sont disponibles :

  • 🔎 Recherche —: par label,libellé, refréférence ou tag.
  • 📂 Type —: images /images, vidéos /ou documents.
  • 🌐 Site —: si vous gérezadministrez plusieurs sites.

La grille se filtremet à jour instantanément. ScrollUn défilement infini en bas pourde chargerpage charge les médias suivants (50 par page).lots de cinquante.

✏️

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

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

Colonne de gauche — Aperçu et utilisation

  • 📷 Aperçu de l'image en taille réelle.
  • 📊Liste des pages où le média est utilisé : « Utilisé sur N bloc(s)éléments — liste».
  • Historique des pagesmodifications, quiprésenté référencentde cemanière média.
  • 📜 Historique — repliable, montre les modifications passées.dépliable.

Colonne de droite — Champs éditables

Champ

Description

Référence

Identifiant courtcourt, réutilisable dans les shortcodes (par exemple

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

).

LabelLibellé

Nom d'affichageaffiché dans la bibliothèque.

Texte alternatif (canonique)

L'attribut

alt

par défaut. Important pour le SEOréférencement et l'accessibilité.

Tags

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

Traductions alt par langue

Repliable.Section dépliable. Un champ par localelangue pour traduire le texte alternatif.

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

📐

Les variantes générées automatiquement

ÀLors de chaque uploadtéléversement d'image, le module crée automatiquement trois tailles supplémentaires en plus de l'original :original.

Variante

Dimensions

Usage typiquetype

thumb

200 × 200 px

Vignettes, galerie

card

640 × 480 px

Cartes article,d'articles, mosaïques

wide

1600 × 1200 px

Hero pleine largeur

original

Dimensions natives

Téléchargement, printimpression

Les variantes sont générées à la demandedemande. (lazy)Lors :de la première foisutilisation qu'd'une pagevariante demande(par la varianteexemple card), elle est créée etpuis mise en cache.

🗑️

Supprimer un média

  1. Ouvrez la modalefenêtre d'édition (clicen cliquant sur la vignette).vignette.
  2. En bas à droite, cliquez sur « Envoyer à la corbeille ».

ℹ️Note Soft-delete— —La Lesuppression est en réalité un marquage : le média n'est pas effacé physiquement du disque. Il est justesimplement marquésignalé comme inactif et n'apparaît plus dans la grille. Vos pages qui l'utilisentle référencent continuent à fonctionner.l'afficher.

⚠️Avertissement — Si le média est utiliséencore —utilisé, Lala suppression est refusée par défaut.défaut refusée. Le module vous montreprésente la liste des pages qui s'appuient dessus.concernées. Soit vous remplacez l'image sur ces pages, soit vous forcez la suppression (bouton supplémentaire) — maisauquel alorscas les pages affichentafficheront l'une image cassée.

Réimporter

🔄le Rescannercontenu d'un dossier de médias

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

Pour les détecter :

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

💡Conseil Auto-rescan— — Le module faiteffectue cecette rescanréimportation automatiquement toutes les 5cinq minutes au maximum quandlors vousde chargezl'ouverture de la bibliothèque. Le bouton sert justeuniquement à forcer unune rescanréimportation immédiat.immédiate.

🔗

Insérer un média dans un slot richtext

de texte riche
  1. Vous éditez un slot de type richtext.texte riche.
  2. Au-dessus de la barre d'outilsoutils, CKEditor,cliquez un boutonsur « Insérer un média ».
  3. Cliquez. La bibliothèque s'ouvre endans modale.une fenêtre.
  4. Sélectionnez ou uploadeztéléversez une image.
  5. Le module insère :
    • Uneune balise <img src alt> si vous avez choisi une image,
    • Unun lien <a href> avec le labellibellé si vous avez choisi un document.

📋

Récapitulatif

✅ Vous savez maintenantdésormais :

  • Accéder à la bibliothèque depuis trois entrées différentes.
  • UploaderTéléverser des médias par bouton, par 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,libellé, alttexte canoniquealternatif +et traductions, tags).
  • Comprendre les variantes générées automatiquement (thumb, card, wide).
  • Supprimer un média en respectant ses utilisations.
  • RescannerRéimporter pour récupérer des fichiers ajoutés hors du Studio.
  • Insérer un média au curseur dans un richtext.slot de texte riche.

AuLe prochainchapitre chapitre, onsuivant aborde le workflowmécanisme de publication — la mécaniquepublication, qui sépare votre travail en cours de la version visible publiquement.

Back to top