Joomla! Documentation™

GSoC 2018
Documentation
pour les images adaptatives pour le nouveau gestionnaire de Média

Joomla! 

4.x

Introduction

L'objectif principal de cette extension est de préserver le message important associé à l'image, en fournissant à l'utilisateur un moyen d'ajouter la zone de mise au point de l'image. Les images sont rendues réactives à l'aide de cette extension. Cette extension est supportée par le plugin media-action et le plugin content.

Fonctionnalités

• Fourni un éditeur de mise au point pour prendre les informations cible de l'auteur, de manière plus intuitive.
• Recadrage automatique des images en fonction de la fenêtre d'affichage de la machine cliente.
• Le recadrage se fait autour de la zone de mise au point sélectionnée par l'auteur.
• L'auteur peut sélectionner des largeurs particulières pour lesquelles les images doivent être recadrées.
• L'auteur peut sélectionner différents formats pour différents appareils.
• L'auteur peut également supprimer toutes les images redimensionnées et les points de mise au point précédents pour une image particulière de l'éditeur de mise au point.
• Si un auteur supprime l'image d'origine du gestionnaire de médias, son image redimensionnée et les points de mise au point seront également supprimés.

Note: Pour activer cette extension, l'administrateur doit activer deux plug-ins à partir du gestionnaire d'extension du plug-in :

1. Media-Action: Plugin intelligent de Rognage
2. Contenu: Plugin d'images adaptatives

Images recadrées

Comment définir des points de mise au point pour une image particulière ?

1. Accédez au gestionnaire de médias, localisez l'image à laquelle vous souhaitez faire des mises au point.
   
2. Modifier cette image, vous seriez redirigé vers la nouvelle fenêtre, allez dans l'onglet Rognage Intelligent.
   
3. Maintenant Sélectionnez la zone de mise au point de l'image à l'aide de l'éditeur fourni.
   800px
4. Après avoir configuré la zone, Enregistrer et fermer l'éditeur, vous serez redirigé vers le gestionnaire de médias.
   
5. Ajoutez simplement cette image normalement à votre article. Bingo...!! Votre image est réactive tout en préservant la partie importante de cette image.

Ajout de mises aux points multiples

1. Suivez l'étape de base pour définir les points de modifications initiaux.
2. Maintenant, dans le coin supérieur droit du plug-in, vous trouverez un menu déroulant avec différentes largeurs mentionnées.
   
3. Sélectionnez une largeur, puis sélectionnez son point de mise au point dans l'éditeur de mise au point.
4. Sauver et fermer l'onglet.

Ajouter une largeur personnalisée

1. Accédez au gestionnaire des extensions du plugin, recherchez «Media-Action Smart Crop».
   
2. Ajoutez maintenant de nouvelles largeurs ici et sauvegardez le plugin.
   
   
3. Vous devriez remarquer ces largeurs dans l'onglet 'Smart Crop' .
   

Suppression de la mise au point précédente

Note: Cela effacera toutes les images précédemment enregistrées et redimensionnées de l'image originale générée par le plugin.

1. Allez dans l'onglet Smart Crop dans Modifier l'image.
2. En bas à droite de l'écran se trouve un bouton de suppression de la mise au point.
3. Après avoir supprimé la mise au point précédente, rechargez la page ou appuyez sur Annuler pour revenir au gestionnaire de médias.

Flux de travail

Ce composant se compose de deux plugins indépendants.

Smart Crop Plugin

Ceci est un plugin Media-Action. Il fournit l'interface utilisateur pour gérer les mises aux points. Il prend les mises aux points de l'utilisateur et les enregistre dans le stockage de fichiers en envoyant une requête AJAX au contrôleur AdaptiveImageController.php . Enfin, lorsque l’auteur est satisfait de sa mise au point il appuie sur Enregistrer et fermer et déclenche une autre requête AJAX, cette fois, les nouvelles images sont générées avec un algorithme efficace et sauvegardées dans le répertoire /media/focus. La nomenclature des images redimensionnées est (redimensionner la largeur de l'image)_(chemin complet encodé en base64 de l'image).

Adaptive Image Plugin

Ceci est un plugin de contenu. Si le focus d'une image particulière est défini dans l'article actuellement ouvert, ce plugin ajoutera l'élément <picture> à cette image et toutes les images redimensionnées associées seront ajoutées à partir de /media/focus/. Ce plugin supprimera également toutes les images redimensionnées si l'image originale n'est pas trouvée (ou supprimée).

Extension de l'extension

Changer de stockage pour les mises aux points

Actuellement, la zone de mise au point est enregistrée au format JSON dans le stockage de fichiers (JSONFocusStore). Cela peut être changé en n'importe quel autre stockage en créant une nouvelle classe de pilote dans Joomla\CMS\AdaptiveImage\. La classe de pilote doit implémenter l'interface Joomla\CMS\AdaptiveImage\FocusStoreInterface. JSONFocusStore la classe de pilote est implémentée Joomla\CMS\AdaptiveImage\FocusStoreInterface. FocusStoreInterface a les méthodes suivantes déclarées :

1. setFocus($dataFocus, $width, $imgSrc)

Cette méthode stocke/met à jour la zone de mise au point dans le stockage.

• $dataFocus a les dimensions de la zone de mise au point. C'est un tableau avec les clés box-left, box-top, box-width, box-height.
• $width C'est la taille de l'image pour laquelle la zone de mise au point est stockée.
• $imgSrcC'est le chemin complet de l'image correspondant à la zone de mise au point.

2. getFocus($imgSrc, $width)

Cette méthode renvoie la zone de mise au point de l'image. Il renvoie toute la zone de mise au point associée à l'image

• $imgSrc C'est le chemin complet de l'image correspondant à la zone de mise au point.
• $width(optional) Si l'utilisateur souhaite prendre en compte la valeur de la zone de mise au point pour une largeur particulière, il peut être mentionné.

3. deleteFocus($imgSrc)

Il supprime toutes les mises aux points associées à l'image.

• $imgSrc C'est le chemin complet de l'image correspondant à la zone de mise au point.