Joomla4 : gestionnaire d'images et médias

Joomla4 apporte des nouveautés fonctionnelles très importantes au niveau de la gestion des médias, mais d'autres améliorations significatives sont plus cachées.

Chargement "lazyload" des images

Le chargement "lazyload" consiste à permettre au navigateur de ne charger les images que lorsqu'elle apparaissent à l'écran. On évite ainsi un temps important de chargement de toutes les images à l'arrivée sur la page. Cette fonction "lazyload" était activée via des plugins (parfois produisant des conflits avec d'autres extensions) sous Joomla3, elle est désormais intégrée sous Joomla4 et fonctionne parfaitement.

Joomla4 apporte par cette fonction "lazyload" un impact important quant à la performance globale du site.

Lorsqu'on clique sur le bouton "Médias" en bas de la zone texte de l'éditeur et qu'on sélectionne une image, on observe que la fonction "lazyload" est activée par défaut.

Gestionnaire de Médias : transfert simplifié des images

Après avoir sélectionné l'emplacement/le dossier où doit être transférée l'image, la procédure est plus simple sous Joomla4 en 1 seul clic, contre 3 clics sous Joomla3.

On peut également, grande nouveauté, transférer l'image par drag&drop :

Gestionnaire de Médias : tri des images

On peut désormais trier les images par : nom, taille, dimensions, dates de création et de modification.
Ci-dessous les 2 modes d'affichage des images en grille ou en détail, avec un exemple de tri par dimension (pour cette notion le calcul est effectué avec la surface, c'est-à-dire la hauteur x la largeur).

Augmentation ou diminution de la taille des vignettes

En cliquant sur les icônes , vous pouvez aisément augmenter ou diminuer la taille des vignettes.

Administration de plusieurs types de médias

En Contenus/Médias il est possible de gérer les images d'une part, des PDFs d'autre part, voire d'autres médias tels que des MP3 ou des vidéos, sans les mélanger.

La démarche est constituée de 3 étapes :

1- créer les dossiers "PDF", "MP3"... sur le serveur.
2- aller dans le plugin "Système de fichier - local" et ajouter ces 2 dossiers (cf image ci-dessous)

A noter que le paramètre "Créer des miniatures" est conseillé à "Oui". Il permet de générer des miniatures pour optimiser l'affichage du gestionnaire des médias. Ce sont les vignettes qui sont affichées et non pas les images dans leur taille normale.

3- aller en Contenus/Médias pour gérer les nouveaux médias de type MP3 et PDF

Nouvelles fonctionnalités d'administration des images

Chaque image dispose d'un petit menu d'administration avec de nouvelles fonctionnalités :

Prévisualiser : permet d'afficher l'image dans sa taille réelle, donc en très grand si l'image est de grande taille. Il n'y a plus de contrainte de taille de container comme sous Joomla3 qui affichait toutes les images selon une taille à peu près identique, quelle que soit la taille physique du fichier.

Télécharger : permet de télécharger sur votre ordinateur l'image, c'est une méthode simple et rapide pour récupérer une image.

Renommer : comme son nom l'indique, on renomme ici facilement le nom du fichier image (pour rappel: pas d'espaces ni de caractères accentués).

Modifier : on peut désormais recadrer une image, changer ses dimensions de manière homogène, effectuer une rotation, modifier sa résolution (son poids). Ces points sont développés dans le chapitre suivant.

Obtenir un lien : cette fonction permet de copier le lien vers l'image, on peut ensuite le copier dans le HTML, ou envoyer ce lien à une personne.

Supprimer : comme son nom l'indique, on peut ici supprimer l'image, ou la sélectionner et cliquer sur le bouton "Supprimer" ce qui revient au même. A noter une autre nouveauté parfois pratique sous Joomla4 sur la suppression des images : pour supprimer un dossier entier, il n'est plus nécessaire de supprimer préalablement ses images, on peut désormais supprimer en 1 click le dossier.

Modifier les images au sein du gestionnaire de médias de Joomla4

En cliquant sur "Modifier" au sein du menu d'administration de l'image, dans l'onglet "Recadrage" il est possible de :

. modifier la résolution (la qualité) de l'image - cf. image en marron
. modifier les proportions de l'image en agissant avec la souris sur la zone de l'image en largeur ou en hauteur (un format carré comme dans l'exemple ci-dessous, ou au contraire un format paysage mais très panoramique) - cf. image en orange
A noter que comme sur Photoshop, pour réaliser un carré, on peut appuyer sur Shift+souris.
Egalement comme sur un éditeur de photos, on peut aussi déplacer la zone redimensionnée pour l'ajuster précisément au visuel qu'on souhaite obtenir.
"Aucun" signifie que les proportions sont libres. "Conserver les proportions" sera bien sûr communément choisi. Les proportions prédéfinies de la boite de sélection sont visibles ci-dessous :

. les nouvelles dimensions de l'image sont affichées dans les champs "Largeur" et "Hauteur" - cf. image en bleu clair
. plus anecdotique, les écarts sur les axes des X (10px à partir de la gauche dans l'exemple) - cf. image en rouge - et des Y  (110px à partir du haut dans l'exemple) - cf. image en vert.

Vous pouvez aussi indiquer des dimensions dans l'onglet "Redimension" et effectuer une rotation de l'image dans l'onglet "Rotation".