prolix/image-bundle

Allow to crop local and remote image before uploading them through a classic form.

PrestaImageBundle

, _(*1)

Overview

PrestaImageBundle is a Symfony bundle providing tools to resize local/remote images before uploading them through a classic form. It uses Cropper jQuery plugin., _(*2)

Installation

Require the bundle as a Composer dependency

php composer.phar require presta/image-bundle

Enable the bundles in the kernel

You must add the following bundles into app/AppKernel.php:, _(*3)

<?php

public function registerBundles()
{
    $bundles = [
        // ...
        new Vich\UploaderBundle\VichUploaderBundle(),
        new Presta\ImageBundle\PrestaImageBundle(),
    ];
}

Configure the bundle

You must use the image_widget.html.twig form theme into app/config.yml., _(*4)

twig:
    form_themes:
        - "PrestaImageBundle:form:image_widget.html.twig"

You must include the routing into app/config/routing.yml:, _(*5)

presta_image:
    resource: "@PrestaImageBundle/Resources/config/routing.yml"

See VichUploader [documentation][5] to configure the bundle., _(*6)

Install assets

See Cropper quick start section to install assets., _(*7)

Note that jQuery and Bootstrap are required., _(*8)

Don't forget to include the following assets in your page:, _(*9)

• /path/to/cropper/dist/cropper.min.css
• /path/to/cropper/dist/cropper.min.js
• @PrestaImageBundle/Resources/public/css/cropper.css
• @PrestaImageBundle/Resources/public/js/cropper.js

Usage

Initialize cropper

(function(w, $) {

    'use strict';

    $(function() {
        $('.cropper').each(function() {
            new Cropper($(this));
        });
    });

})(window, jQuery);

Use the form type

<?php

use Presta\ImageBundle\Form\Type\ImageType;

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('image', ImageType::class)
    ;
}

Available options for the ImageType:, _(*10)

• aspect_ratio (array): a list of aspect ratio to apply when resizing an image
• cropper_options (array): a list of options supported by cropper (default: ['autoCropArea' => 1])
• max_width (int): the max width of the cropped image send to server (default: 320)
• max_height (int): the max height of the cropped image send to server (default: 180)
• preview_width (int): the max width to use when displaying the image preview (default: 320)
• preview_height (int): the max height to use when displaying the image preview (default: 180)
• download_uri (string): the path where the image is located (default: null, automatically set)
• download_link (bool): whether the end user should be able to add a remote image by URL (default: true)
• upload_mimetype (string): format of the image to be uploaded (default: image/png)
  (Note: If choosen mimetype is not supported by browser it will silently fall back to image/png)
• upload_quality (float): quality (0..1) of uploaded image for lossy imageformats (eg. image/jpeg) (default: 0.92)

Notes

You can find Cropper options here., _(*11)

The max_width and max_height options are used to define maximum size the cropped uploaded image will be. Bigger images (after cropping) are scaled down., _(*12)

Security Note: NEVER rely on this size constraints and the format settings as they can be easily manipulated client side. ALWAYS validate the image-data, -size, -format at server side!, _(*13)

Contributing

Pull requests are welcome., _(*14)

Thanks to everyone who has contributed already., _(*15)

This project is supported by PrestaConcept, _(*16)

Lead Developer : @J-Ben87, _(*17)

Released under the MIT License, _(*18)