Developed with love by KnpLabs Hire us for your project!
22

PrestaImageBundle

by prestaconcept

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

PrestaImageBundle

Build Status
Scrutinizer Code Quality
Latest Stable Version
Total Downloads

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.

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:

<?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.

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

You must include the routing into app/config/routing.yml:

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

See VichUploader documentation to configure the bundle.

Install assets

See Cropper quick start section to install assets.

Note that jQuery and Bootstrap are required.

Don't forget to include the following assets in your page:

  • /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:

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

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.

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!

Contributing

Pull requests are welcome.

Thanks to
everyone who has contributed already.


This project is supported by PrestaConcept

Lead Developer : @J-Ben87

Released under the MIT License

  • Merge pull request #45 from prestaconcept/symfony4-support
    By web-flow, 2 months ago
  • Update travis.yml
    By J-Ben87, 2 months ago
  • Add support for Symfony 4.0
    By J-Ben87, 2 months ago
  • Merge pull request #39 from ceesvanegmond/patch-2
    By web-flow, 6 months ago
  • Feature: Relatively size save the image instead of the original cropbox itself
    By ceesvanegmond, 6 months ago
  • Merge pull request #38 from ceesvanegmond/patch-1
    By web-flow, 6 months ago
  • Bugfix: Don't show image if there isn't any
    By ceesvanegmond, 6 months ago
  • Merge pull request #37 from akadko/master
    By web-flow, 8 months ago
  • Merge pull request #36 from ceesvanegmond/patch-3
    By web-flow, 8 months ago
  • Bugfix: Correctly strip base64 prefix
    By ceesvanegmond, 8 months ago
  • Merge pull request #34 from ceesvanegmond/ceesvanegmond-patch2
    By web-flow, 8 months ago
  • Merge branch 'master' into ceesvanegmond-patch2
    By web-flow, 8 months ago
  • Merge pull request #35 from prestaconcept/travis
    By web-flow, 8 months ago
  • Update travis ci
    By J-Ben87, 8 months ago
  • Update .travis.yml
    By web-flow, 8 months ago
  • Update PrestaImageBundle.nl.xliff
    By web-flow, 8 months ago
  • Feature: Add nl language to the project
    By ceesvanegmond, 9 months ago
  • Fixed
    By , 9 months ago
  • Fixed bug with deleting images
    By akadko, 9 months ago
  • Fixed bug with deleting images
    By akadko, 9 months ago
  • Added classes to modal buttons
    By akadko, 9 months ago
  • Define extension
    By akadko, 9 months ago
  • Define mimeType
    By akadko, 9 months ago
  • Fixed form type
    By web-flow, 9 months ago
  • Edited template (fix)
    By web-flow, 9 months ago
  • Edited form type
    By web-flow, 9 months ago
  • Edited template
    By web-flow, 9 months ago
  • Fixed bug with undefined var in the template
    By web-flow, 9 months ago
  • Merge pull request #31 from derpue/uploadImageType
    By web-flow, 11 months ago
  • Merge pull request #32 from derpue/moreTranslations
    By web-flow, 11 months ago