Sep 8, 2016 10:37:19 AM Pierre LEVY avatar   737    

Utilisation du plugin upload image

Le plugin upload image est un plugin permettant de simplifier et de centraliser le framework d'upload image offrant la possibilité de croper les images. Il utilise actuellement le plugin jQuery Image Cropping plugin ( https://github.com/fengyuanchen/cropper).


Description du fonctionnement

Le plugin upload image fournit des fichiers JavaScript et des macros Freemarker permettant de créer des inputs de type "fichier" afin de réaliser des uploads des images et de permettre à l'utilisateur de croper ces dernières. Le code HTML généré par ces macros utilisera des fonctions JavaScript permettant de zoomer, tourner, déplacer, ,désactiver, activer et croper une image.

Utilisation du plugin

Afin d'utiliser le plugin Upload Image, il faut effectuer 4 opérations :

  • Inclure le plugin Upload Image et l'activer.
  • Créer et assigner les options du crop.
  • Inclure dans le HTML généré un fichier javascript fourni par la JSP accessible à l'addresse jsp/site/plugins/uploasimage/GetMainUploadJs.jsp. Eventuellement.
  • Ajouter dans le formulaire des inputs de type image permettant de réaliser des uploads d'image à l'aide des macros Freemarker.

Chaque input créé avec la macro Freemarker correspondante est identifié par son nom (attribut fieldName de la macro), le chemin de l'image ou son contenu(attribut file) et une classe css (cssClass).

Inclusion du plugin

Les sources de la version en cours du plugin Upload Image sont disponibles à l'adresse suivante : https://github.com/lutece-platform/lutece-tech-plugin-uploadimage.git

Le plugin peut être déclaré comme une dépendance d'un autre plugin Lutèce dans son pom.xml grâce au code suivant :

<dependency>
    <groupId>fr.paris.lutece.plugins</groupId>
    <artifactId>plugin-uploadimage</artifactId>
    <version>[1.0.0-SNAPSHOT,)</version>
    <type>lutece-plugin</type>
</dependency>

Création des options du crop

Dans le back office créer les options à associer au crop (lien uploadimage). Pour consulter la description des différentes options : https://github.com/fengyuanchen/cropper.

/**
 * Macro permettant d'inclure les fichiers JavaScript et CSS nécessaires au fonctionnement des inputs d'upload image et du crop.
 * Cette macro doit être utilisées si le service d'inclusion du portail Lutèce ne fonctionne pas (exemple : dans le Back Office, dans des JSP spécifiques, ...)
 */
<#macro addRequiredJsUploadImages >
/**
 * Macro permettant d'ajouter un input et un bloc de type image initialisé pour l'upload de l'image.
 * Cette macro créera également un bloc permettant d'afficher l'image uploadé.
 * @param fieldName Nom de l'input à générer.
 * @param file le src de l'image, la valeur par défaut une chaine vide.
 * @param inputCssClass Classe CSS à ajouter à l'input généré. La valeur par défaut est une chaîne de caractères vide.
 * @param synchronus:  mettre false à la création et true lors d'un update.
 */
<#macro cropimage  fieldName  file  cssClass  synchronous>

Exemple d'inclusion :

/*
* images/admin/skin/plugins/uploadimage/picture.jpg: image par defaut du plugin.
*/

<@cropimage  fieldName= "fieldname"  file="images/admin/skin/plugins/uploadimage/picture.jpg"  cssClass=""  synchronous="false"/>