**Recommandé —** Soumettez votre sitemap à Google Search Console une seule fois. Google reviendra ensuite le consulter automatiquement à intervalles réguliers.
### Balises hreflang multilingues Pour un site multilingue, Google a besoin de savoir quelles pages sont des traductions les unes des autres. C'est le rôle des balises ``. Le module génère ces balises automatiquement, à condition que votre développeur ait inclus le helper dans l'en-tête du gabarit : ``` ```**Conseil —** Si vous ne voyez pas ces balises sur votre site, demandez à votre développeur d'ajouter `` dans l'en-tête de vos gabarits.
### Liste de contrôle SEO par page **Avant de publier une nouvelle page, vérifiez les points suivants :** - Le titre SEO compte 50 à 60 caractères et contient le mot-clé principal. - La meta description compte 140 à 160 caractères et incite au clic. - L'image Open Graph est définie ; à défaut, le partage social affichera une vignette générique. - Toutes les images possèdent un texte alternatif (renseigné dans la bibliothèque média). - Le H1 (souvent un slot `page_title`) est unique et descriptif. - L'URL (slug) est en minuscules, sans accents, avec des tirets pour séparer les mots. ### Outils de mesure du référencement Le module génère le SEO mais ne le mesure pas. Pour suivre vos résultats, utilisez les outils standards : - **Google Search Console** : permet de découvrir les pages indexées, les requêtes qui génèrent des clics, les erreurs. - **Google Analytics** ou **Matomo** : trafic, comportement des visiteurs, conversions. - **PageSpeed Insights** : performance de chargement et indicateurs Core Web Vitals. - **Outils de test Open Graph** : Facebook Sharing Debugger, LinkedIn Post Inspector. ### Récapitulatif **Vous savez désormais :** - Renseigner le titre SEO, la meta description, les mots-clés et l'image Open Graph d'une page. - Lire l'aperçu Google en direct avec ses compteurs colorés. - Ajouter une image Open Graph pour un partage social soigné. - Régénérer le sitemap.xml manuellement ou en ligne de commande. - Comprendre l'utilité des balises hreflang multilingues. - Suivre une liste de contrôle SEO complète avant publication. **Fin de la Partie III —** Vous savez désormais utiliser le module au quotidien : modifier le contenu, gérer les médias, publier, traduire, gérer un blog, exploiter un catalogue produit et soigner le référencement. Vous êtes autonome. La Partie IV s'adresse aux développeurs intégrateurs. Si ce n'est pas votre rôle, vous pouvez passer directement aux Annexes (glossaire, FAQ, historique des versions). # CHAPITRE 15 — Catalogue produit dynamique Si votre site présente un catalogue de produits Dolibarr (services, logiciels, abonnements), le module peut générer automatiquement une page web dédiée à chaque produit. Vous ajoutez un produit dans Dolibarr, sa page web est créée sans intervention supplémentaire. ### Le concept Vous disposez probablement déjà de produits dans Dolibarr (table `llx_product`) avec leur fiche commerciale (libellé, description, prix). Sur votre site web, vous souhaitez : - Un **catalogue** qui répertorie tous les produits actifs. - Une **page détaillée par produit**. - Une **mise à jour automatique** : tout nouveau produit donne une nouvelle page sans intervention manuelle. Le module remplit exactement ce besoin. Vous écrivez un seul gabarit de fiche produit (la page `solution-detail`), et le module génère un wrapper `solution-.php` pour chaque produit publié. ### Préparer un produit Dolibarr pour le catalogue Pour qu'un produit apparaisse dans le catalogue web, deux conditions doivent être remplies :| Champ | Valeur requise |
|---|---|
| **Statut commercialisable** ( `tosell` ) | À vendre (= 1) |
| **Publié sur le site** (champ personnalisé `infrasstudio_published` ) | Coché (= 1) |
| tosell | published | Visibilité |
|---|---|---|
| 0 | — | Invisible partout (commercial et web) |
| 1 | 0 | Brouillon — modifiable côté Studio mais invisible publiquement |
| 1 | 1 | Publié — la carte apparaît sur le catalogue et la page de détail est servie |
| Catégorie | Champs |
|---|---|
| **Champs natifs Dolibarr (traduisibles)** | libellé, description (texte riche) |
| **Champs personnalisés traduisibles** | accroche, libellé du bouton, déploiement, compatibilité, support, langues, fonctionnalités, paliers tarifaires |
| **Champs personnalisés non traduisibles** | image principale, URL du bouton, étiquette |
**Conseil —** Pour les produits, l'enregistrement automatique n'est pas activé : vous cliquez sur « Enregistrer » manuellement. Ce choix est délibéré, les champs Dolibarr étant plus sensibles, car directement liés à votre fiche produit commerciale.
### Publier ou retirer un produit 1. Sélectionnez le produit dans la liste. 2. Dans la barre d'outils centrale, cliquez sur **Publier** (ou **Dépublier** si déjà publié). 3. Le module modifie le champ personnalisé `infrasstudio_published` à 1 (ou 0). 4. Il déclenche ensuite la régénération automatique des wrappers `solution-.php`. 5. Une notification verte confirme l'opération.**Effet de la publication —** Le wrapper `/var/www/
**Effet de la dépublication —** Le wrapper est supprimé. Tout visiteur tentant d'accéder à l'URL reçoit une erreur 404. La carte disparaît du catalogue.
### Régénérer les wrappers manuellement Si une désynchronisation est suspectée — par exemple un produit modifié récemment qui n'affiche pas la bonne version — deux options sont disponibles. ##### **Bouton dans la barre d'outils** 1. Sur la fiche produit, cliquez sur l'icône **Régénérer wrapper** (icône de synchronisation). 2. Le module reconstruit le wrapper de ce produit. ##### **Bouton « Reconstruire maintenant » (administrateur)** 1. Rendez-vous dans Outils → InfraSStudio → Configuration. 2. Repérez la section **Wrappers solution**. 3. Cliquez sur **Reconstruire maintenant**. 4. L'ensemble des wrappers est régénéré en une seule opération.**Note —** Une tâche planifiée toutes les heures régénère les wrappers en arrière-plan. En cas d'oubli ou d'incident temporaire, l'état est rétabli au plus tard une heure après.
### La page de catalogue La page de catalogue (généralement `/catalogue.php`) liste tous les produits publiés sous forme de cartes. Chaque carte présente : - L'image principale du produit. - Une étiquette éventuelle (« Nouveau », « Promotion », etc.). - Le libellé. - L'accroche. - La catégorie ou l'univers, déduits des catégories Dolibarr. - Un lien vers la page de détail. Les visiteurs peuvent filtrer le catalogue par univers (Supply Chain, Health, Legal, etc.) et par type (SaaS, Extension, Instant). Les filtres sont en JavaScript et instantanés. ### Lien direct depuis Dolibarr Sur la fiche produit du Studio, un bouton **Voir public** ouvre la page solution publique dans un nouvel onglet. Un autre bouton **Voir la fiche Dolibarr** ouvre la fiche produit native. **Aller-retour fluide —** Vous pouvez naviguer entre la fiche commerciale Dolibarr et l'éditeur web Studio sans interrompre votre flux de travail. ### Récapitulatif **Vous savez désormais :** - Comprendre qu'une page web est générée automatiquement par produit publié. - Préparer un produit (tosell=1, infrasstudio\_published=1). - Modifier les champs natifs et personnalisés depuis le Studio. - Distinguer les champs traduisibles des champs non traduisibles. - Publier ou dépublier un produit, ce qui pilote son wrapper et sa carte sur le catalogue. - Régénérer manuellement un wrapper en cas de désynchronisation. - Comprendre que le catalogue se filtre côté visiteur sans rechargement. Le dernier chapitre de la Partie III aborde le référencement. # CHAPITRE 14 — Gérer les articles de blog Le blog géré par le module repose sur les pages standard du module Website. Aucune table dédiée, aucun système parallèle : un article correspond à une page web. L'ensemble de ce que vous savez déjà s'applique, avec quelques raccourcis ergonomiques supplémentaires. ### Comprendre l'architecture du blog| Élément | Description |
|---|---|
| **Article** | Une page Dolibarr Website portant le type `blogpost` . |
| **Page d'index** | Une page standard (par exemple « Ressources » ou « Blog ») qui liste les articles publiés. |
| **Multilingue** | Un article correspond à une page, qui correspond à un fichier PHP. Les traductions vivent dans les surcharges de slots, comme pour toute page. |
**Effet automatique —** Le module crée la page Dolibarr, le fichier `tpl.php`, le wrapper Apache `blog-mon-titre.php` et pré-remplit les slots `post_title` et `post_category`.
### Anatomie d'un article Un article créé depuis le gabarit standard contient les slots suivants :| Slot | Type | Rôle |
|---|---|---|
| `post_title` | texte court | H1 et titre SEO de l'article |
| `post_meta_description` | texte court | Meta description SEO (150-160 caractères) |
| `post_category` | texte court | Rubrique affichée en pastille au-dessus du titre |
| `post_lead` | texte long | Chapeau ou accroche en italique sous le titre |
| `post_hero_image` | image | Image principale en pleine largeur en haut de l'article |
| `post_body` | texte riche | Le corps de l'article (éditeur visuel complet) |
| `post_secondary_image` | image | Image illustrative facultative dans le corps |
| `post_secondary_alt` | texte court | Texte alternatif de l'image secondaire |
**Note —** La date d'un article n'est pas un slot. Elle est lue automatiquement depuis la base Dolibarr (date de modification, sinon date de création). Vous n'avez pas à la saisir.
### Date et auteur d'un article La date affichée publiquement suit cette cascade : 1. La date de modification de la page (la plus récente). 2. La date de création si la page n'a jamais été modifiée. Vous n'avez rien à saisir : à chaque publication d'une modification, la date est mise à jour automatiquement. C'est le comportement standard d'un blog.**Conseil —** Pour antidater un article, demandez à votre administrateur Dolibarr de modifier `llx_website_page.date_creation` en SQL. Aucune interface dédiée n'est prévue, par souci de simplicité.
L'auteur affiché est généralement géré par un slot dans le gabarit du site (par exemple `post_author`). ### La page d'index avec son listing automatique La page d'index du blog (« Ressources », « Blog », etc.) ne nécessite aucune édition manuelle pour ajouter un nouvel article : la liste se met à jour automatiquement. Lorsque vous publiez un nouvel article : 1. Le module détecte la nouvelle page de type `blogpost` au statut publié. 2. Au prochain rendu de la page d'index, l'article apparaît dans la grille. 3. Image principale, titre, catégorie, accroche, date : tout est lu depuis les slots de l'article.**Conséquence —** Vous ne touchez jamais à la page d'index. Vous publiez vos articles. Le listing se met à jour de lui-même.
### La section « À lire également » Sous chaque article, une section affiche trois articles aléatoires (autres que celui qui est consulté). Aucune configuration n'est nécessaire : la sélection est effectuée par le module à chaque rendu. ### Modifier un article existant 1. Ouvrez l'éditeur Studio. 2. Dans la colonne de gauche, dépliez le groupe **blogpost**. 3. Cliquez sur l'article à modifier. 4. L'aperçu se charge. Modifiez les slots normalement (clic dans l'aperçu, inspecteur, etc.). 5. Publiez lorsque vous êtes prêt. ### Dupliquer un article Cette fonction est utile pour réutiliser une structure existante : 1. Ouvrez l'article modèle. 2. Cliquez sur **Dupliquer** dans la barre d'outils. 3. Une fenêtre demande le nouveau slug (préfixé `blog-`) et le nouveau titre. 4. Confirmez. 5. Le module crée la copie avec tous les slots clonés (canonique et traductions). 6. Vous êtes redirigé vers le nouvel article pour le personnaliser. ### Supprimer un article **Réservé aux administrateurs —** Le bouton « Supprimer » de la barre d'outils n'est visible qu'avec la permission `admin`. Une confirmation est demandée. La suppression est irréversible : la page Dolibarr, ses slots, son fichier `tpl.php` et son wrapper Apache disparaissent définitivement. **Alternative —** Plutôt que de supprimer, utilisez **Retirer du site**. L'article sort du listing public mais reste consultable depuis l'éditeur. Vous pouvez le remettre en ligne plus tard. ### Récapitulatif **Vous savez désormais :** - Comprendre qu'un article correspond à une page Dolibarr Website. - Créer un nouvel article via l'assistant contextuel sur la page d'index. - Renseigner les huit slots du gabarit blog standard. - Comprendre la datation automatique de l'article. - Constater que le listing se met à jour de lui-même. - Modifier, dupliquer, retirer ou supprimer un article. Le chapitre suivant présente le catalogue produit dynamique. # CHAPITRE 13 — Travailler en plusieurs langues Si votre site existe en plusieurs langues, ce chapitre vous concerne. Le module est multilingue dès la création du premier slot. Aucune duplication de page n'est nécessaire : une seule page, plusieurs traductions. ### Le modèle multilingue Le module repose sur le modèle « une page, plusieurs traductions » :| Concept | Description |
|---|---|
| **Langue canonique** | La langue principale du site (généralement le français). C'est la valeur de référence. |
| **Langues secondaires** | Les autres langues activées sur le site. Chaque slot peut disposer d'une surcharge spécifique pour chacune d'elles. |
| **Valeur par défaut** | Définie par le développeur dans le HTML. Sert de filet de sécurité ultime. |
**Conséquence rassurante —** Si vous omettez de traduire un slot en allemand, le visiteur voit la version française. Aucune page cassée, aucun texte vide.
### Activer une langue sur votre site Cette opération s'effectue une fois pour toutes, par le développeur ou l'administrateur, dans le module Website Dolibarr : 1. Rendez-vous dans Accueil → Sites web. 2. Sélectionnez votre site. 3. Cliquez sur l'onglet **Configuration**. 4. Dans le champ **Autres langues**, ajoutez les codes ISO (par exemple `en_US,de_DE,es_ES`). 5. Enregistrez. Les langues disponibles correspondent à votre installation Dolibarr (environ 118 langues nativement). Les plus courantes sont : `fr_FR`, `en_US`, `de_DE`, `es_ES`, `it_IT`, `pt_PT`, `nl_NL`, `pl_PL`. ### Basculer entre les langues dans l'éditeur Au-dessus de l'aperçu central, une rangée d'onglets accompagnés de drapeaux représente les langues activées. Le drapeau actif est mis en valeur visuellement. 1. Cliquez sur le drapeau d'une autre langue (par exemple anglais). 2. L'aperçu se recharge dans cette langue. 3. Si vous avez déjà saisi des traductions, elles s'affichent. 4. Sinon, l'aperçu présente la version canonique (français).**Conseil —** Ouvrez deux onglets de votre navigateur côte à côte, l'un en français et l'autre en anglais. Vous visualisez en temps réel l'effet de vos traductions sur les deux versions.
### Traduire un slot — méthode rapide La méthode la plus naturelle consiste à rester focalisé sur la langue affichée : 1. Cliquez sur l'onglet de la langue cible (par exemple anglais). 2. Cliquez sur le texte à traduire dans l'aperçu. 3. L'inspecteur s'ouvre. Le champ principal est prêt à recevoir la traduction. 4. Saisissez la traduction. 5. L'enregistrement automatique l'enregistre comme surcharge pour cette langue. L'aperçu se met à jour. Pour vérifier que vous n'avez pas écrasé la version française, basculez sur l'onglet français : le texte original doit toujours s'y trouver. ### Traduire un slot — méthode toutes-langues Pour saisir d'un coup les traductions dans toutes les langues, sans changer d'onglet : 1. Sélectionnez un slot. 2. Dans l'inspecteur, dépliez la section **Autres langues**. 3. Vous voyez un champ par langue, avec un drapeau en préfixe. 4. Saisissez chaque traduction. 5. L'enregistrement automatique s'effectue à chaque champ.**Conseil —** Cette vue est idéale pour un traducteur professionnel à qui vous donnez accès au Studio avec la seule permission `editTranslations`.
### Indicateurs visuels de surcharge Comment savoir d'un coup d'œil quels slots sont traduits et lesquels ne le sont pas ? ##### **Sur les onglets de langue** L'onglet de la langue actuellement affichée comporte un point coloré si la valeur est une surcharge (différente du canonique). Sur le canonique, aucun point n'est affiché. ##### Dans la section « Autres langues » Chaque champ de langue affiche un repère à droite :| Repère | Signification |
|---|---|
| **surcharge** (vert) | Vous avez saisi une traduction spécifique pour cette langue. |
| **hérite FR** (gris) | Aucune traduction. Le visiteur voit la valeur canonique. |
**Conseil —** Si vous saisissez dans un champ surcharge la même valeur que le canonique, le module supprime automatiquement la surcharge. Cela évite un enregistrement redondant.
### Traductions des fiches produit Les fiches produit Dolibarr disposent de leur propre éditeur de traductions, distinct de l'éditeur de slots. Pour y accéder : 1. Tableau de bord du Studio → carte **Traductions produits**. 2. Vous arrivez sur une page à deux colonnes. 3. À gauche, la liste des produits commercialisables. 4. À droite, l'éditeur avec onglets de langue. ##### **Champs traduisibles**| Catégorie | Champs |
|---|---|
| **Champs natifs Dolibarr** | libellé, description |
| **Champs personnalisés traduisibles** | accroche, libellé du bouton, déploiement, compatibilité, support, langues, fonctionnalités, paliers tarifaires |
| **Champs non traduisibles** | image principale, URL du bouton, étiquette (ces valeurs sont universelles) |
**Synchronisation native —** Les modifications effectuées depuis le Studio sont visibles instantanément dans la fiche produit Dolibarr et dans son onglet Traductions natif. Et inversement.
### Récapitulatif **Vous savez désormais :** - Comprendre l'ordre de résolution (surcharge → canonique → défaut). - Basculer entre les langues via les onglets dotés de drapeaux. - Traduire un slot en mode rapide (par langue) ou tous-langues simultanément. - Lire les indicateurs de surcharge. - Revenir à la valeur canonique avec « Retour au FR ». - Éditer les traductions des fiches produit. Le chapitre suivant aborde la gestion du blog. # CHAPITRE 12 — Brouillon, publication et versions Tout ce que vous saisissez n'est pas immédiatement visible publiquement. Le module utilise un système de brouillons qui vous permet de préparer plusieurs modifications, de les relire, puis de les publier en une seule opération. Ce chapitre détaille ce mécanisme. ### La distinction essentielle entre brouillon et publication| État | Visibilité |
|---|---|
| **Brouillon** | Visible uniquement dans l'éditeur Studio (aperçu central). Les visiteurs du site continuent à voir l'ancienne version. |
| **Publié** | Visible publiquement. Les visiteurs voient la nouvelle version dès la publication. |
**Note —** Le module stocke deux valeurs par slot : `value` (la valeur publique) et `value_draft` (le brouillon). L'aperçu Studio lit en priorité `value_draft`. Le rendu public lit uniquement `value`.
### Repérer ses brouillons en attente Plusieurs indicateurs visuels signalent la présence de brouillons non publiés. ##### **Sur la liste des pages (colonne de gauche)** Une pastille orange à côté du titre de la page indique qu'elle contient au moins un brouillon non publié. ##### **Sur la barre d'outils de l'éditeur** Le bouton **Publier les modifications** apparaît avec un compteur numérique précisant le nombre de brouillons : - Aucun brouillon : le bouton est masqué. - Un ou plusieurs brouillons : le bouton est visible avec le compteur (par exemple « Publier les modifications (3) »). ##### **Sur l'inspecteur** Un slot avec un brouillon en cours porte un repère orange « modifié » à côté de son libellé. ##### **Sur l'aperçu central** L'aperçu présente toujours la version brouillon. Pour voir exactement ce que verrait un visiteur, cliquez sur **Voir public** dans la barre d'outils, ce qui ouvre la page dans un nouvel onglet. ### Publier les modifications Lorsque vous êtes satisfait de votre brouillon : 1. Cliquez sur **Publier les modifications** en haut à droite de la barre d'outils. 2. Une boîte de confirmation s'affiche : « Publier les N modifications de cette page ? » 3. Cliquez sur **Confirmer**. 4. Une notification verte « Modifications publiées » apparaît en bas à droite. 5. L'aperçu reste identique, puisque la version brouillon est devenue la version publique. 6. Le compteur numérique disparaît, ainsi que la pastille orange dans la barre latérale.**Effet immédiat —** Les visiteurs qui ouvrent la page après votre publication voient la nouvelle version. Aucun délai, aucun cache à vider.
**Conseil —** Préparez plusieurs modifications avant de publier. Le bouton publie l'ensemble des brouillons en une seule fois, ce qui évite que les visiteurs voient des versions intermédiaires.
### Annuler les modifications en attente Si vous changez d'avis et souhaitez tout abandonner pour revenir à la version actuelle du site : 1. Cliquez sur **Annuler les modifications** dans la barre d'outils, à côté de « Publier ». 2. Une boîte de confirmation s'affiche : « Annuler les N modifications de cette page ? Cette action est irréversible. » 3. Cliquez sur **Confirmer**. 4. L'ensemble des brouillons est supprimé. 5. L'aperçu se met à jour avec la version publique.**Avertissement —** Une fois confirmée, l'annulation efface définitivement vos brouillons. Aucune récupération n'est possible.
### Mettre en ligne ou retirer du site (statut de la page) Cette fonction ne doit pas être confondue avec « Publier les modifications ». Le bouton agit ici sur la visibilité de la page elle-même, non sur ses contenus.| Bouton | Effet |
|---|---|
| **Publier les modifications** | Bascule les brouillons des slots vers les valeurs publiques. Concerne le contenu de la page. |
| **Mettre en ligne ou Retirer du site** | Bascule la visibilité de la page. Une page « Retirée du site » renvoie une erreur 404 ; le wrapper Apache est supprimé. |
**Effet de « Mettre en ligne » —** Le wrapper Apache `
**Note —** L'historique vous permet de consulter qui a fait quoi. Une fonction de restauration directe d'une version antérieure n'est pas encore disponible : si vous avez besoin de revenir en arrière, contactez votre administrateur Dolibarr, qui peut récupérer la valeur depuis la base de données.
### Workflow recommandé pour une équipe Pour les sites édités par plusieurs personnes : 1. Le rédacteur ouvre la page et procède aux modifications. Toutes restent à l'état de brouillon. 2. Le rédacteur partage le lien de l'éditeur avec un relecteur (chef de projet, marketing, juriste, etc.). 3. Le relecteur ouvre la même page dans le Studio. L'aperçu lui présente la version brouillon. 4. Le relecteur valide ou demande des ajustements via un canal externe (Slack, courriel, etc.). 5. Le rédacteur applique les ajustements (toujours en brouillon). 6. Une fois la version validée, le rédacteur ou un publicateur dédié, selon les permissions configurées, clique sur « Publier les modifications ».**À retenir —** Le système de brouillon n'est pas un confort optionnel. Il évite les publications accidentelles en cours de rédaction et permet une véritable validation à plusieurs avant que les visiteurs voient le résultat.
### Récapitulatif **Vous savez désormais :** - Distinguer un brouillon (privé à l'éditeur) d'une publication (visible publiquement). - Reconnaître les indicateurs visuels (pastille orange, compteur numérique, repère slot). - Publier les modifications d'une page en un clic. - Annuler les brouillons en cas de changement d'avis. - Distinguer « Publier les modifications » (contenu) et « Mettre en ligne ou Retirer » (visibilité). - Consulter l'historique d'un slot. - Mettre en place un processus de relecture collective. Le chapitre suivant aborde la gestion du multilingue. # CHAPITRE 11 — Gérer les images et la bibliothèque média Toutes les images, vidéos et documents que vous utilisez sur votre site transitent par la bibliothèque média. Il s'agit d'un emplacement central : vous téléversez un fichier une seule fois et le réutilisez partout où vous en avez besoin. #### Accéder à la bibliothèque Trois entrées sont possibles : 1. **Depuis le tableau de bord** : cliquez sur la carte « Bibliothèque médias ». 2. **Depuis l'éditeur** : sélectionnez l'onglet **Médias** en haut de la colonne gauche. 3. **Depuis un slot image** : cliquez sur le bouton « Choisir une image » qui ouvre la bibliothèque dans une fenêtre. #### L'organisation de la bibliothèque La bibliothèque est gérée par site. Si vous administrez plusieurs sites, chacun dispose de sa propre médiathèque indépendante. Au sein d'un site, les médias sont classés par type :| Type | Formats acceptés |
|---|---|
| **Image** | JPG, PNG, WebP, SVG, GIF |
| **Vidéo** | MP4, WebM |
| **Document** | PDF, DOC et autres formats bureautiques |
**Conseil —** Pour les photographies, le format **WebP** est recommandé. Il offre un fichier 30 à 50 % plus léger qu'un JPG à qualité équivalente. Le module accepte ce format nativement.
#### Retrouver un média existant Au-dessus de la grille, plusieurs filtres sont disponibles : - **Recherche** : par libellé, référence ou tag. - **Type** : images, vidéos ou documents. - **Site** : si vous administrez plusieurs sites. La grille se met à jour instantanément. Un défilement infini en bas de page charge les médias suivants par lots de cinquante. #### Modifier les métadonnées d'un média Cliquez sur une vignette. Une fenêtre d'édition s'ouvre, organisée en deux 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 éléments ». - Historique des modifications, présenté de manière dépliable. ##### **Colonne de droite — Champs éditables**| Champ | Description |
|---|---|
| **Référence** | Identifiant court, réutilisable dans les shortcodes (par exemple `{{media:ref=hero-1.url}}` ). |
| **Libellé** | Nom affiché dans la bibliothèque. |
| **Texte alternatif (canonique)** | L'attribut `alt` par défaut. Important pour le référencement et l'accessibilité. |
| **Tags** | Mots-clés facilitant la recherche du média. |
| **Traductions par langue** | Section dépliable. Un champ par langue pour traduire le texte alternatif. |
**Recommandé —** Renseignez systématiquement le texte alternatif. C'est ce qui est affiché 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 Lors de chaque téléversement d'image, le module crée automatiquement trois tailles supplémentaires en plus de l'original.| Variante | Dimensions | Usage type |
|---|---|---|
| **thumb** | 200 × 200 px | Vignettes, galerie |
| **card** | 640 × 480 px | Cartes d'articles, mosaïques |
| **wide** | 1600 × 1200 px | Hero pleine largeur |
| **original** | Dimensions natives | Téléchargement, impression |
**Note —** La suppression est en réalité un marquage : le média n'est pas effacé physiquement du disque. Il est simplement signalé comme inactif et n'apparaît plus dans la grille. Vos pages qui le référencent continuent à l'afficher.
**Avertissement —** Si le média est encore utilisé, la suppression est par défaut refusée. Le module présente la liste des pages concernées. Soit vous remplacez l'image sur ces pages, soit vous forcez la suppression — auquel cas les pages afficheront une image cassée.
#### Réimporter le contenu d'un dossier Si vous avez ajouté des fichiers sans passer par le Studio (FTP, SCP, ou via l'éditeur Dolibarr Website), ils n'apparaissent pas dans la bibliothèque. Pour les détecter : 1. Dans la barre d'outils de la bibliothèque, cliquez sur **Réimporter**. 2. Le module parcourt le dossier physique du site. 3. Les fichiers absents de la bibliothèque sont enregistrés.**Conseil —** Le module effectue cette réimportation automatiquement toutes les cinq minutes au maximum lors de l'ouverture de la bibliothèque. Le bouton sert uniquement à forcer une réimportation immédiate.
#### Insérer un média dans un slot de texte riche 1. Vous éditez un slot de type texte riche. 2. Au-dessus de la barre d'outils, cliquez sur **Insérer un média**. 3. La bibliothèque s'ouvre dans une fenêtre. 4. Sélectionnez ou téléversez une image. 5. Le module insère : - une balise `**Recommandé —** L'indicateur « Enregistré » à côté du champ confirme la sauvegarde en brouillon. Pour rendre la modification visible publiquement, cliquez sur **Publier les modifications** en haut à droite.
#### Méthode 2 — Liste « Contenu de la page » Cette méthode est utile lorsqu'un slot n'est pas directement cliquable, par exemple une image masquée ou une valeur stockée dans un attribut. 1. Ouvrez la page sans cliquer sur l'aperçu. 2. Consultez la colonne de droite. 3. La liste « Contenu de la page » répertorie tous les emplacements éditables. 4. Chaque ligne présente un type, un libellé, un aperçu de la valeur et un repère « modifié » en cas de brouillon en cours. 5. Cliquez sur la ligne souhaitée pour ouvrir son formulaire.**Conseil —** Les slots sont regroupés par section (« hero », « pied de page », « appel à l'action », etc.) selon le découpage défini par votre développeur. Cela facilite la navigation sur les pages longues.
#### Méthode 3 — Navigation par sections Sur les pages longues, vous pouvez utiliser la barre de défilement de l'aperçu pour atteindre la section recherchée, puis cliquer dessus directement. #### Les types de champs disponibles Le développeur a choisi un type pour chaque slot. Ce type détermine l'apparence du formulaire d'édition. Voici l'ensemble des types existants. ##### **Texte court** Champ d'une seule ligne, sans mise en forme. Convient pour les titres, les libellés et les noms. Une longueur maximale peut être imposée, auquel cas un compteur de caractères est affiché. ##### **Texte long** Champ multi-lignes sans mise en forme. Les sauts de ligne sont autorisés et automatiquement convertis en retours visuels. Idéal pour une accroche ou un paragraphe simple. ##### **Texte riche** Éditeur visuel complet (CKEditor) avec barre d'outils étendue.| Outil | Effet |
|---|---|
| **Format** | Paragraphe, Titre 2, Titre 3, Titre 4, Code |
| **Style** | Gras, italique, souligné, barré |
| **Couleur** | Couleur de texte et couleur de fond, selon la palette de la marque |
| **Alignement** | Gauche, centre, droite, justifié |
| **Listes** | Listes à puces, listes numérotées, indentation |
| **Liens** | Insérer ou supprimer un lien |
| **Insérer un média** | Ouvre la bibliothèque pour insérer une image au curseur |
**Note importante —** L'éditeur ne propose pas de bouton « source » pour modifier le HTML brut. Ce choix est délibéré, comme expliqué au Chapitre 3.
##### **Image** Le champ comporte une zone de saisie, un bouton de sélection dans la bibliothèque, un bouton de suppression et une vignette d'aperçu. 1. Cliquez sur le bouton **Choisir une image**. 2. La bibliothèque média s'ouvre dans une fenêtre. 3. Sélectionnez une image existante ou téléversez-en une nouvelle. 4. L'image est intégrée et la vignette s'affiche.**Conseil —** Vous pouvez également glisser-déposer une image depuis la barre latérale Médias directement sur la zone d'image dans l'aperçu central.
##### **URL** Champ texte adapté aux liens. Les mêmes outils que pour les images sont disponibles, par exemple le sélecteur pour insérer un média comme cible. ##### **Icône** Champ de sélection d'une icône FontAwesome. 1. Saisissez le nom de la classe (par exemple `fa-solid fa-star`) ou cliquez sur l'une des vingt icônes proposées (étoile, cœur, fusée, etc.). 2. Choisissez la couleur dans le sélecteur. 3. Un aperçu en direct s'affiche. ##### **Couleur** Sélecteur de couleur HTML5 accompagné d'un champ hexadécimal. - Format strict : `#RRGGBB` ou `#RRGGBBAA` (avec transparence). - Bouton **Défaut** pour revenir à la valeur initiale. - Une couleur n'est pas traduisible et reste identique dans toutes les langues. #### **Nombre** Champ numérique simple avec validation. ##### **Booléen** Case à cocher pour un choix oui ou non. ##### **Liste déroulante** Menu déroulant avec des options définies par votre développeur. #### Le panneau d'édition multilingue Pour les slots de type texte (texte court, texte long, texte riche), l'inspecteur présente trois zones distinctes.| Zone | Contenu |
|---|---|
| **Champ principal** | La langue actuellement affichée dans l'aperçu (drapeau actif). C'est ici que vous saisissez la majorité du temps. |
| **Autres langues** (dépliable) | Un champ par langue prise en charge. Cliquez sur la flèche pour déplier et saisir les traductions. |
| **Options avancées** (dépliable) | La valeur canonique partagée entre toutes les langues. À ne modifier qu'en cas de besoin spécifique. |
**Note —** Au moment du rendu public, le module recherche la valeur dans cet ordre : surcharge dans la langue du visiteur, valeur canonique, valeur par défaut. Le visiteur voit toujours un contenu, même en l'absence de traduction.
Pour les slots non textuels (image, couleur, icône, etc.), une seule zone « Valeur (toutes langues) » est proposée. Une image se traduit rarement. #### L'enregistrement automatique en pratique Aucun bouton « Enregistrer » n'est à cliquer. Le module sauvegarde automatiquement votre travail. 1. Vous saisissez du texte. 2. Le module attend une demi-seconde de pause. 3. L'indicateur passe à **Enregistrement...**. 4. Le serveur reçoit la valeur et l'enregistre comme brouillon. 5. L'indicateur passe à **Enregistré** en vert.**Conseil —** Si l'indicateur affiche « Erreur réseau », votre connexion a probablement été interrompue. Utilisez Ctrl+Z pour récupérer votre saisie, attendez le rétablissement de la connexion, puis ressaisissez.
#### Annuler une modification non publiée Tant que vous n'avez pas publié, plusieurs options de retour en arrière sont possibles : 1. **Annulation locale** : utilisez Ctrl+Z dans le champ pour revenir frappe par frappe. 2. **Annulation globale de la page** : cliquez sur **Annuler les modifications** dans la barre d'outils. Tous les brouillons de la page courante sont alors supprimés.**Avertissement —** Le bouton « Annuler les modifications » est définitif. Une confirmation est demandée. Une fois validée, le brouillon est perdu et la page revient à sa version publique.
#### Récapitulatif **Vous savez désormais :** - Cliquer sur un texte de l'aperçu pour l'éditer. - Utiliser la liste « Contenu de la page » pour les slots non cliquables. - Reconnaître les neuf types de champs (texte court, texte long, texte riche, image, URL, icône, couleur, nombre, liste). - Distinguer la valeur d'une langue, la valeur canonique et la valeur par défaut. - Comprendre le fonctionnement de l'enregistrement automatique en brouillon. - Annuler une modification avant publication. Le chapitre suivant aborde la bibliothèque média. # CHAPITRE 09 — Tour de l'interface Studio Ce chapitre constitue votre première visite guidée du Studio. Vous allez parcourir l'ensemble des écrans sans encore éditer quoi que ce soit. À la fin, vous saurez où chercher chaque élément et comment vous repérer.**Note —** Le module InfraSStudio doit être activé sur votre instance Dolibarr et au moins un site doit être configuré. Si ce n'est pas le cas, consultez d'abord la Partie II.
#### Étape 1 — Accéder au Studio 1. Connectez-vous à votre Dolibarr. 2. Dans le menu supérieur, cliquez sur **Outils**. 3. Dans le menu latéral qui apparaît, repérez la section **InfraS**. 4. Cliquez sur **InfraSStudio**. Vous arrivez sur le tableau de bord du Studio.**Conseil —** Vous pouvez ajouter cette page à vos favoris dans votre navigateur. Vous y reviendrez fréquemment.
#### Étape 2 — Comprendre le tableau de bord Le tableau de bord constitue votre point d'entrée. Il se divise en plusieurs zones, présentées de haut en bas. ##### **L'en-tête personnalisé** Une salutation contextuelle (« Bonjour », « Bon après-midi », « Bonsoir » selon l'heure) est suivie de la date du jour. Cet élément constitue un simple repère visuel. ##### **Vos sites** Une grille de cartes affiche un site géré par carte. Pour chacun, vous retrouvez : - Le nom du site, par exemple **monsite**. - Un lien direct vers le site public, accessible via une icône globe. - Trois compteurs colorés : pages publiées, pages en brouillon et articles de blog. - Trois boutons d'action : Éditer, Articles et Produits.**Recommandé —** Cliquez sur **Éditer** pour entrer dans l'éditeur principal. C'est par cette voie que vous passerez la majorité de votre temps.
##### **Statistiques globales** Quatre indicateurs sont présentés en permanence : nombre de produits publiés, nombre de produits en brouillon, nombre de médias dans la bibliothèque et taille totale en mégaoctets. ##### **Actions rapides** Cinq cartes cliquables conduisent directement aux opérations courantes : 1. **Nouvel article** : créer un billet de blog en deux clics. 2. **Éditer une page** : ouvrir l'éditeur unifié. 3. **Gérer les produits** : accéder à la section produits dans l'éditeur. 4. **Traductions produits** : ouvrir l'éditeur multilingue dédié aux fiches produit. 5. **Bibliothèque médias** : accéder à la gestion centralisée des fichiers. ##### **Activité récente** Une frise chronologique affiche les huit derniers contenus modifiés (slots et produits), avec un lien **Ouvrir** qui vous permet de reprendre votre travail là où vous l'aviez laissé. ##### **Aide à la prise en main** Un panneau dépliable « Comment utiliser InfraSStudio ? » présente quatre étapes guidées. Il s'avère particulièrement utile pour vos collègues qui découvrent l'outil. #### Étape 3 — Entrer dans l'éditeur Cliquez sur le bouton **Éditer** de la carte d'un site. Vous accédez alors à l'écran central du Studio : l'éditeur en trois colonnes.| Colonne | Rôle |
|---|---|
| **Gauche — Arborescence** | Liste des pages du site, regroupées par type (pages standards, articles de blog, en-tête, pied de page). Recherche en temps réel. Compteur de slots par page. Indicateurs visuels pour les brouillons en attente. |
| **Centre — Aperçu** | Aperçu en direct de la page sélectionnée, présenté dans un cadre qui imite un navigateur. Onglets de langue avec drapeaux. Boutons de basculement entre les vues bureau, tablette et mobile. |
| **Droite — Inspecteur** | Lorsqu'aucun slot n'est sélectionné, l'inspecteur présente la liste de tous les emplacements éditables de la page. Lorsqu'un slot est sélectionné, il bascule sur le formulaire d'édition correspondant. |
**Conseil —** Les trois colonnes sont redimensionnables. Faites glisser les séparateurs verticaux pour ajuster la mise en page à la taille de votre écran.
#### Étape 4 — Le déroulement d'une session d'édition Voici le déroulement type d'une session d'édition : 1. Vous cliquez sur une page dans la colonne de gauche. 2. L'aperçu se charge au centre, avec la page rendue exactement comme la verra un visiteur. 3. Vous cliquez sur un texte de l'aperçu, par exemple le titre principal. 4. L'inspecteur s'ouvre à droite avec un champ de saisie pré-rempli avec la valeur actuelle. 5. Vous modifiez le texte. Le système enregistre automatiquement après une demi-seconde d'inactivité. 6. L'aperçu se met à jour. À ce stade, votre modification reste à l'état de brouillon, invisible pour les visiteurs du site. 7. Lorsque vous êtes satisfait, vous cliquez sur le bouton **« Publier les modifications »** en haut à droite. Votre travail devient alors visible publiquement.**Recommandé —** Préparez plusieurs modifications avant de publier. Le bouton « Publier les modifications » applique en une seule fois l'ensemble des modifications en attente sur la page, ce qui évite que les visiteurs voient des versions intermédiaires incohérentes.
#### Étape 5 — Les boutons de la barre d'outils centrale Une barre d'actions est présentée au-dessus de l'aperçu. Voici la fonction de chaque bouton, dans l'ordre d'apparition.| Bouton | Effet |
|---|---|
| **SEO** | Ouvre une fenêtre avec un aperçu du résultat Google en direct. Voir le Chapitre 16. |
| **Dupliquer** | Crée une copie de la page courante. Cette fonction est particulièrement utile pour les articles de blog. |
| **Mettre en ligne / Retirer du site** | Modifie la visibilité publique de la page. À distinguer de « Publier les modifications » dont la fonction est différente. |
| **Publier les modifications** | Publie l'ensemble des brouillons en attente sur la page. Une pastille indique le nombre de modifications concernées. |
| **Annuler les modifications** | Supprime tous les brouillons et restaure la version actuellement publiée. |
| **Voir public** | Ouvre la page publique dans un nouvel onglet du navigateur. |
| **Supprimer** | Réservé aux administrateurs. Une confirmation est demandée. Voir l'avertissement ci-dessous. |
**Avertissement —** Le bouton **Supprimer** efface définitivement la page, ses traductions, ses slots, son fichier `tpl.php` et son wrapper Apache. Aucun retour en arrière n'est possible. Réservez son usage aux cas véritablement nécessaires.
#### Étape 6 — Naviguer dans la liste des pages La colonne de gauche est plus puissante qu'il n'y paraît. Voici comment l'exploiter. ##### **Le sélecteur de section** En haut de la colonne, deux onglets : **Pages** et **Médias**. Selon la configuration du site, un troisième onglet **Produits** peut apparaître si le catalogue dynamique est activé. ##### **La recherche en temps réel** Saisissez quelques caractères dans le champ **Rechercher** : la liste se filtre instantanément. La recherche porte sur le titre, le slug et la catégorie. ##### **Les groupes de pages** Les pages sont regroupées par type : - **page** : pages standards (accueil, contact, à propos, etc.). - **blogpost** : articles de blog. - **other** : éléments structurels (en-tête, pied de page, menu). ##### **Les indicateurs visuels** - Une pastille orange à côté d'une page indique qu'elle comporte des modifications en brouillon. - Un nombre entre crochets, par exemple **\[3\]**, donne le nombre de slots éditables sur la page. - Une icône grisée signale que la page est en mode « Retirée du site ». ##### **Le bouton Nouveau** Le bouton est situé tout en bas de la liste. Selon le contexte : - Sur la page d'index d'un blog, il devient « + Nouvel article ». - Sur les autres pages, il devient « + Nouvelle page ». #### Étape 7 — L'inspecteur L'inspecteur connaît deux états distincts. ##### **État vide : la liste « Contenu de la page »** Lorsqu'aucun slot n'est sélectionné dans l'aperçu, l'inspecteur présente la liste exhaustive des slots de la page, regroupés par section. Pour chacun : - Une icône précise le type (texte, image, couleur, icône, etc.). - Le libellé du slot est affiché. - Un aperçu de la valeur actuelle est proposé, limité à soixante caractères. - Un repère orange « modifié » signale qu'un brouillon est en cours. Cliquez sur n'importe quelle ligne pour ouvrir le formulaire d'édition. ##### **État édition : le formulaire** Lorsqu'un slot est sélectionné, l'inspecteur bascule en mode édition. Vous y trouvez : - Un bouton « ← Retour » pour revenir à la liste. - Le libellé du slot affiché en titre. - Un champ d'édition principal pour la langue actuellement affichée dans l'aperçu. - Une section dépliable « Autres langues » pour saisir les versions linguistiques. - Une section dépliable « Options avancées » qui permet d'accéder à la valeur canonique partagée. Son usage est à réserver à des cas particuliers.**Conseil —** L'enregistrement automatique se déclenche une demi-seconde après votre dernière saisie. Un indicateur affiche successivement « Enregistrement... » puis « Enregistré ». Aucun bouton de sauvegarde n'est nécessaire.
#### Étape 8 — Changer de langue dans l'aperçu Au-dessus de l'aperçu, une rangée d'onglets accompagnés de drapeaux représente les langues activées sur votre site (FR, EN, DE, etc.). 1. Cliquez sur le drapeau d'une autre langue. 2. L'aperçu se recharge dans cette langue. 3. Lorsque vous éditez un slot, le champ principal de l'inspecteur correspond à la langue actuellement affichée.**Note —** La langue principale du site (généralement le français) constitue la langue canonique. Les autres langues sont des traductions complémentaires. Lorsqu'une traduction manque, le visiteur voit la version canonique. Le Chapitre 13 détaille ce mécanisme.
#### Récapitulatif **Vous savez désormais :** - Accéder au Studio depuis Outils → InfraS. - Lire le tableau de bord (sites, statistiques, actions rapides, activité récente). - Entrer dans l'éditeur en trois colonnes. - Identifier le rôle de chacune des trois colonnes (arborescence, aperçu, inspecteur). - Reconnaître les boutons de la barre d'outils centrale. - Naviguer entre les langues via les onglets dotés de drapeaux. - Comprendre la distinction entre brouillon et publication. Le chapitre suivant aborde concrètement la modification d'un texte.