Appearance

Frontend - gulp, themes, JS, cookies ​

Node 22.x (nvm use 22.12.0). Build via gulp (src/Web/gulpfile.js).

Commandes ​

bash
cd src/Web
npm install
npm run build   # gulp build : compileSCSS + bundleJS (parallele)
npm run dev     # gulp watch : recompile a chaque changement

SCSS (themes) ​

  • Entrees : styles/themes/**/main.scss (3 themes : default, icogne, l-info).
  • Pipeline : Dart Sass -> postcss([cssnano]) (minification) + sourcemaps -> wwwroot/css/{theme}/main.css.
  • Structure d'un theme : main.scss, _variables.scss, _bootstrap_custom.scss, _utilities.scss, et dossiers base/, layout/, pages/, elements/, sections/. Bootstrap 5 personnalise par theme ; couleur d'accent differente par site.

JavaScript ​

  • Entree unique : scripts/index.js.
  • Pipeline : browserify + babelify (@babel/preset-env) + uglify + sourcemaps -> wwwroot/js/main.js.
  • Modules (scripts/modules/) : activityGallery, blogPage, cookiesConsent, featuredTestimonials, geolocatedMap, glightbox, header, maps, mobileMenu, multimediaBlock, newsletter, search, socialShare. cookiesConsent et glightbox sont charges en import dynamique.

Image pleine largeur dans le RTE (contenu local) ​

Option d'affichage disponible dans le Rich Text Editor (RTE) local d'Umbraco (backoffice), pour afficher une image sans crop sur toute la largeur du contenu. Ne concerne que le contenu local (RTE des pages) : ni les articles headless, ni le imageBlock (image recadree via crops).

  • Plugin TinyMCE : App_Plugins/Backoffice/tinymce/plugins/imagefullwidth/plugin.js (miroir du plugin stickytoolbar). Ajoute un bouton bascule imagefullwidthbtn (« Pleine largeur ») dans la barre d'outils contextuelle qui apparait quand une image est selectionnee dans le RTE ; il ajoute/retire la classe CSS rte-img-full sur la balise <img>.
  • Enregistrement : declare dans appsettings.json, cle Umbraco:CMS:RichTextEditor:CustomConfig:external_plugins, meme pattern que stickytoolbar.
  • Rendu front (les 3 themes) : partial SCSS partage styles/base/elements/_rteImage.scss (regle .rte img.rte-img-full { display:block; width:100%; height:auto; }), importe via @use "../../base/elements/rteImage"; dans le main.scss de chaque theme (default, icogne, l-info).
  • Apercu backoffice : regle equivalente ajoutee dans wwwroot/css/rte.css pour que l'editeur voie le rendu pleine largeur directement dans l'iframe TinyMCE.

Consentement cookies (regle importante) ​

Tout outil tiers non essentiel (analytics, marketing) ne doit se charger qu'apres acceptation du consentement non-fonctionnel.

  • Banniere : partial Views/Partials/layout/_cookiesConsent.cshtml, traductions issues du dictionnaire Umbraco (JSON #cc_translations), inclus dans _MasterLayout.cshtml (et layouts par skin).
  • Librairie : cookieconsent.umd.js (categories necessary / analytics).
  • Module scripts/modules/cookiesConsent.js : init() configure la librairie ; updateGTMConsent() met a jour l'etat de consentement GTM (gtag('consent', 'update', { analytics_storage: ... })) selon la categorie analytics.

Ajouter un outil marketing/analytics ​

  1. Creer un partial dans Views/Partials/layout/marketing/.
  2. L'inclure conditionnellement dans _MasterLayout.cshtml (selon le cookie de consentement).
  3. Mettre a jour cookiesConsent.js (acceptCookies() / updateGTMConsent()) pour injecter le script a l'acceptation (sinon il ne s'activera qu'au prochain reload).

Note : verifier que GA4 (marketing/_googleAnalytics4.cshtml) est bien conditionne au consentement et non charge inconditionnellement.

Contributors

No contributors

Changelog

No recent changes