Mar 8, 2018 2:42:47 PM seb leridon avatar   1153

Use of uploadimage plugin feature

The upload image plugin is a plugin to simplify and centralize the image upload framework offering the possibility of cropping images. He currently uses the jQuery Image Cropping plugin plugin (https://github.com/fengyuanchen/cropper).


!!! TOC !!!

Description of operation

The image upload plugin provides JavaScript files and Freemarker macros for creating "file" inputs in order to upload images and allow the user to create new images. The HTML generated by these macros will use JavaScript functions to zoom, rotate, move, disable, activate, and crop an image.

Using the plugin

In order to use the Upload Image plugin, you must perform 4 operations:

  • Include the Upload Image plugin and activate it.
  • Create and assign crop options.
  • Include in the generated HTML a javascript file provided by the JSP accessible at the address jsp / site / plugins / uploasimage / GetMainUploadJs.jsp. Eventually.
  • Add in the form image-type inputs for image uploads using Freemarker macros.

Each input created with the corresponding Freemarker macro is identified by its name (fieldName attribute of the macro), the path of the image or its contents (file attribute), and a css class (cssClass).

Inclusion of the plugin

The sources of the current version of the Upload Image plugin are available at the following address: https://github.com/lutece-platform/lutece-tech-plugin-uploadimage.git

The plugin can be declared as a dependency of another Lutèce plugin in its pom.xml thanks to the following code:

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

Creating crop options

In the back office create the options to associate with crop (uploadimage link). To see the description of the different options: https://github.com/fengyuanchen/cropper.

/ **
 * Macro to include the JavaScript and CSS files necessary for the operation of image upload and crop inputs.
 * This macro must be used if the inclusion service of the Lutèce portal does not work (example: in the Back Office, in specific JSPs, ...)
 * /
<#macro addRequiredJsUploadImages>
/ **
 * Macro to add an input and an image type block initialized for the upload of the image.
 * This macro will also create a block to display the uploaded image.
 * @param fieldName Name of the input to generate.
 * @param files the src of the image, the default value is an empty string.
 * @param inputCssClass CSS class to add to the generated input. The default value is an empty string.
 * @param synchronus: set false to creation and true during an update.
 * /
<#macro cropimage fieldName file cssClass synchronous>

Inclusion example:

/*
* images/admin/skin/plugins/uploadimage/picture.jpg: default plugin image
*/

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