Joomla

Si vous tapez du code en mode éditeur de code dans l’éditeur de joomla, vous aurez surement constaté que ce dernier nettoie (efface) votre code dès que vous passez en mode wysiwyg, tout cela c’est pour des raison de sécurité. Si vous savez ce que vous faites et savez que le code que vous introduisez est fiable, vous pouvez désactiver cette fonction:

Tout est expliqué sous ce lien: https://www.joomlashack.com/blog/joomla/stop-joomla-from-stripping-out-code/

Une page pleine d’infos très intéressantes pour se familiariser avec Cassiopeia le template de base de Joomla 4

https://slides.woluweb.be/cassiopeia/cassiopeia.html

Joomla 4 n’intègre plus par défaut jquery. La façon d’intégrer un fichier externe js ou css a également changé. Voici comment procéder:

dans le fichier montemplate/joomla.asset.json
ajoutez chaque fichier dans l’objet json comme par exemple

{
“name”: “template.nomduscript”,
“description”: “Add the gsap library”,
“type”: “script”,
“uri”: “gsap-public/minified/gsap.min.js”,
“dependencies”: [
“template.active” (si ce fichier est dépendant d’un autre spécifiez-le ici)
]
},
si un fichier doit être chargé après un autre, spécifié ce dernier dans dans “dependencies”

Petite exception pour charger jQuery qui fait encore partie de Joomla mais n’est plus chargé d’office, vous pouvez simplement ajouter cette ligne dans la surcharge que vous aurez créé

\Joomla\CMS\HTML\HTMLHelper::_(‘jquery.framework’);

Joomla 4 est livré avec la librairie Bootstrap 5. On pourra intégrer séparément chaque composant Javascript de la manière suivante en indiquant dans le premier paramètre le type de composant et dans le deuxième un sélecteur.

\Joomla\CMS\HTML\HTMLHelper::_(‘bootstrap.alert’, ‘.alert’);

Les options peuvent être configurées avec le troisième paramètre optionnel (un tableau):

\Joomla\CMS\HTML\HTMLHelper::_(‘bootstrap.carousel’, ‘.carousel’, [‘slide’=>’carousel’]);

ensuite dans montemplate/index.php, appeler le “name” du fichier comme ce qui suit

$wa->usePreset(‘template.cassiopeia.’ . ($this->direction === ‘rtl’ ? ‘rtl’ : ‘ltr’))
->useStyle(‘template.active.language’)
->useStyle(‘template.user’)
->useScript(‘template.user’)
->useScript(‘template.nomduscript’)
->addInlineStyle(‘:root {
–hue: 214;
–template-bg-light: #f0f4fb;
–template-text-dark: #495057;
–template-text-light: #ffffff;
–template-link-color: #2a69b8;
–template-special-color: #001B4C;
}’);