facebook instagram twitter rss2 youtube youtube wordpress joomla tux appleinc windows skype paypal

Du beau travail

Avec Joomla! 4 l'équipe de développeurs d'OSM (Open Source Matters Inc), L'organisation à but non lucratif qui soutient le projet Joomla! vient de signer une très belle réalisation, tant au niveau technologique qu'au niveau du design du Template Cassiopeia livré avec cette nouvelle mouture.

Vous trouverez sur cette page un petit glossaire qui pourra vous aider à vous familiariser avec Joomla! 4.x et vous faire gagner du temps avec ces quelques ficelles que je vous livre ici.

Bootstrap logo

Joomla 4.x utilise le Framework Bootstrap 5

Bootstrap permet de créer des sites rapides et réactifs (Responsive Design).

Cassiopeia, le nouveau Template de Joomla s'appuie sur Bootstrap, l'avantage ainsi est donc de pouvoir bénéficier de toutes les classes CSS que Bootstrap fournit nativement sans avoir à réinventer la roue.

En outre ce template utilise aussi la bibliothèque d'icônes de Font-Awesome que vous pouvez donc insérer dans vos articles, menus et modules.

Quelques class Bootstrap a utiliser avec délectation :

  • d-none d-sm-block
  • boxed
  • float
  • Clearfix
  • justify-content-end
Joomla! logo

Image d'introduction (image à la une, image mise en avant)

Sous ces trois dénominations se trouve la même chose, avoir une image qui représente le mieux le contenu de son article et la mettre en avant pour attirer l'attention et rendre le site plus agréable.

Pour ce faire, lorsque vous éditez un article, dans l'onglet "Image et liens" choisissiez une image d'introduction (remplissez les champs de celle-ci à votre convenance).

Mais comment définir l'image d'introduction comme lien vers l'article dans l'affichage du blog ?
Rendez-vous dans :
Contenu → Article → Paramètres (en haut à droite) → Blog Épinglés → Image d'introduction liée : OUI.
L'équipe de Joomla a ici tiré parti de la fonctionnalité Bootstrap 5 - Stretched link.

Affichage du Blog

L'affichage d'un lien de menu en blog peut se faire sur 1 ou plusieurs colonnes, cela affectera donc la façon dont les articles associés à la catégorie de ce lien de menu s'afficheront sur le site web.

Si vous optez pour 3 colonnes par exemple, vous avez également le choix de la "Direction multicolonne" :

  • En ligne : cela alignera les articles en rangée de hauteur égale, des blancs seront placés au bas de ceux n'ayant pas assez de contenus pour ajuster leur hauteur.
  • En colonne : Cela les affichera à la façon imbriquée (style Masonry), l'ordre chronologique sera alors vertical.

Largeur du site

Cassiopeia, fournit nativement deux façon d'afficher le site : Fluide ou Colonne.

Ce choix se fait dans Système -> Style des Template du site -> Cassiopeia -> Affichage : Colonne ou Fluide.

En colonne : Cela placera le site (sur grand écran) au milieu de la page sur une largeur de 982px pour les articles et la Sidebar de droite à 318px.
Évidemment si vous optez pour une sidebar aussi à gauche, cela modifiera la largeur des articles.

Fluide : le site occupera toute la largeur de l'écran.

Template-Enfant

Joomla 4 permet très facilement de créer un Template-Enfant et ainsi de pouvoir à volonté modifier certaines choses, couleurs, polices, comportement responsive sans avoir pour autant à créer un Template de A à Z.
Un seul impératif : le fichier CSS de votre Template-Enfant doit se nommer user.css et être placé dans le dossier CSS de votre Template-Enfant.

NB. Le dossier CSS du Template-enfant se trouvera dans : /media/template/site/nom-de-votre-template-enfant/css.

CSS pour Module

Si lorsque vous ajoutez une class CSS à un Module cela n'a aucun effet, c'est parce qu'est sélectionné en "Style du module" : "Inherit" (par défaut).

"Inherit" signifie que le module prendra le style défini dans la position du modèle.
<jdoc:include type="modules" name="bg" style="none" />
Si la position est style="Card" ou "noCard" (selon vos besoins), le module sera chargé sans chrome autour, votre class CSS pourra alors être prise en compte.
C'est le comportement attendu, voir : https://docs.joomla.org/Module_chrome/fr.

Recherche avancée

La recherche avancée est désormais le seul composant de recherche natif de Joomla 4.x, il est très puissant et comporte de nombreux paramètres, à ajuster dans le composant, sur des liens de menus ou vos modules de recherche, selon les fonctionnalités que vous désirez.

Pour l'utiliser, il vous faudra évidemment lancer l'indexation de vos contenus.

Une bonne introduction qui en explique quelques rouages (sous Joomla 3.x mais le principe est le même) ici sur You Tube : Tutoriel en vidéo.

A noter : la page qui retourne les résultats de l’occurrence recherchée est calquée sur la page d’accueil. En conséquence, si vous appliquez une class CSS de page au lien de menu de la page d’accueil, la page des résultats en héritera.

Résoudre le problème des liens trop longs

Si vous avez des liens avec des URL très longues, l'affichage de votre site pourrait en pâtir et casser son design. Ajoutez ces instructions CSS à votre user.css de votre Temple-Enfant pour résoudre cela :

a {
  word-wrap: break-all;
  -ms-word-break: break-all;
  word-break: break-all;

  /* Non standard for WebKit */
  word-break: break-word;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

Favicon

pour modifier la favicon de votre site Joomla, vous devrez créer trois fichiers ainsi nommés :

  • joomla-favicon.svg
  • joomla-favicon-pinned.svg
  • favicon.ico

Puis les placer dans le dossier :/media/template/site/nom-de-votre-template-enfant/images/

Pour créer votre favicon au format SVG je vous conseille le logiciel libre GNU inkscape, et pour l'exporter au format .ICO utilisez The Gimp.

Et pour la Favicon du Back-Office qui utilise le template Atum ?

Le principe est le même, seul le chemin d'accès est différent :
Vous devrez placer vos trois nouveaux fichiers d'icônes personnalisées ici :
/media/templates/administrator/atum/images/

NB. Elles n'y sont pas présentes dans une installation par défaut et ne seront donc pas modifiées en cas de mise à jour de Joomla. Voir au besoin cette discussion sur le forum de Joomla (en anglais).

Notification par Email

Cette autre fonctionnalité que Joomla 4 a introduit nativement est bien pratique pour un administrateur.

Elle fonctionne en conjonction avec le plugin (natif également) : Système - Journal des actions utilisateur que vous devez activer via Système → Gestion → Extension (filtrez avec le mot "action" pour la trouver plus vite).

Vous verrez alors dans votre compte Super-Administrateur (via Utilisateur → Gestion → Votre compte) un nouvel onglet Journalisation des actions à partir duquel vous pourrez opter pour les actions pour lesquelles vous désirez recevoir un mail.

Une excellente chose pour savoir quand un auteur, un éditeur ou un gestionnaire utilise telle ou telle action et vérifier son travail le cas échéant et aussi une manière de sécuriser encore un peu plus votre site.

Les 19 actions disponibles pour lesquelles vous pouvez recevoir des notifications par mail sont :

  1. Articles
  2. Bannières
  3. Cache
  4. Catégories
  5. Configuration
  6. Contacts
  7. Déverrouillage
  8. Extensions
  9. Fils d'actualité
  10. Médias
  11. Menus
  12. Messagerie
  13. Modules
  14. Plugins
  15. Redirections
  16. Tache planifiées
  17. Tags
  18. Templates
  19. Utilisateurs

En-têtes HTTP

Joomla 4 à introduit un nouveau gestionnaire d'en-têtes HTTP, si vous n'êtes pas familier avec cela et que vos sites sont hébergés chez un hébergeur digne de ce nom, vous ne devriez pas vous en soucier. Gandi par exemple pour ses offres Simple Hosting ne préconise aucune en-tête et aucune n'est nécessaire.

Cela étant dit il vous revient de définir du bien fondé de l'utilisation de celles-ci et de déterminer lesquelles vous sont pertinentes en connaissance de leurs spécificités.

D'un point de vu technique ce ne sont que des en-tête http, elles sont de ce fait compatible avec les serveurs Apache. Mais leurs utilisations nécessitent de savoir ce qu'elles impliquent.

Par exemple l'utilisation du Strict-Transport-Security implique que votre site web dispose d'un certificat SSL et qu'il est accessible en https.

Voir aussi :docs.joomla.org/J4.x:Http_Header_Management

Back-Office

Comment rendre la structure du menu de l'administration de Joomla 4 similaire à celle de Joomla 3 ?

Par défaut, le nouveau menu principal de la barre latérale de Joomla 4 comporte six liens de premier niveau. Avec cette hiérarchisation, l'accès au 31 liens sont "cachés" derrière l'élément de menu Système.
Si vous le souhaitez vous pouvez simplement modifier ce comportement.
Allez dans Contenus → Modules 'Administration', recherchez Menus principal puis ouvrez-le.

Utilisez la flèche déroulante pour modifier le pré-réglage et passez de :
- Préréglage - Menu principal de Joomla!
- à Préréglage - Menu principal alternatif, enregistrez et fermez, puis retournez à votre tableau de bord.

Ce paragraphe est une libre traduction faîte de cet article. (en anglais) où trouver d'autres bottes secrètes (et les captures d'écran de cette astuce).

Joomla Debug Console

En cas de souci vous pouvez utiliser cette console en l'activant à partir de la Configuration Globale de Joomla!, onglet Système, en définissant l'option Système de débogage sur Oui. Une fois activé, la sortie du plugin de débogage sera affichée au bas de chaque page.

N'oubliez pas de la désactiver une fois vos contrôles terminés (surtout sur un site en production).

Voir : https://docs.joomla.org/How_to_debug_your_code/fr

Répertoire temporaire PHP

Attention, ces indications ne concernent que ceux qui testent Joomla sur un serveur de développement sous Ubuntu / GNU-Linux.

Vous ne devriez en règle générale pas avoir besoin de définir un répertoire temporaire pour PHP. Ce sont des instructions que je donne si vraiment vous êtes coincé pour une raison où une autre et que tout ce que vous avez trouvé sur le net ne vous a pas aidé auparavant.

"Le répertoire temporaire PHP n'est pas défini."

Ce message indique que sur votre serveur Apache vous devriez définir le chemin d'accès au dossier temporaire PHP. Vous pouvez le faire en éditant avec Nano le fichier "php.ini" de votre serveur Apache, dans la section "File Uploads", avec cette instruction :

upload_tmp_dir = /home/username/votre-dossier

Donc, le plus simple :

  1. créez un dossier dans votre /home/USERNAME et nommez-le "phptemp" ("USERNAME" représente votre nom d'utilisateur Ubuntu).
  2. puis lancez dans un terminal ces deux commandes :

    sudo chown -Rv www-data:www-data ~/phptemp

    sudo chmod -R g+w ~/phptemp

    Cela attribue ce dossier au groupe www-data et lui donne les bons droits d'accès.

  3. Ensuite éditez avec Nano le fichier php.ini

    sudo nano /etc/php/X.x/apache2/php.ini

    X.x représente votre version de php (modifiez ce chemin en conséquence dans cette commande).

    Et modifiez la ligne

    ;upload_tmp_dir =

    ainsi :

    upload_tmp_dir ="/home/USERNAME/phptemp"

    Assurez-vous que vous avez bien supprimé le ; (poin-virgule) du début, utilisé des guillemets et modifié USERNAME par votre nom !

  4. Puis recharger les configurations d'Apache et redémarrez-le avec :

    sudo /etc/init.d/apache2 reload

    sudo /etc/init.d/apache2 restart

À suivre

Au fil de l'eau j'ajouterai de nouvelles astuces au sujet de Joomla 4 qui me sembleront utiles. N'hésitez pas à visiter à nouveau cette page de temps à autres.

Contributeur : Olivier Pouzadoux

Vous avez aimé cet article, partagez-le !

 
     

Logo des hirondelles du net

Tous ensemble- Restons unis