Adapt the images before uploading them

Presentation

The upload image plugin simplifies and centralizes the image upload framework offering the possibility of cropping images. It provides JavaScript files and Freemarker macros for creating "file" inputs in order to upload images, JavaScript functions allowing to zoom, rotate, move, disable, activate, and crop the images before upload.

The sources of the current version of the Upload Image plugin are available at this address . It currently uses the jQuery Cropper plugin .

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.
• 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 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"/>