Adapt the images before uploading them (Upload Image Plugin)
Adapt the images before uploading them
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.
- 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 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>
/* * images/admin/skin/plugins/uploadimage/picture.jpg: default plugin image */ <@cropimage fieldName= "fieldname" file="images/admin/skin/plugins/uploadimage/picture.jpg" cssClass="" synchronous="false"/>