PHPackages                             presta/image-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [File & Storage](/categories/file-storage)
4. /
5. presta/image-bundle

ActiveSymfony-bundle[File & Storage](/categories/file-storage)

presta/image-bundle
===================

PrestaImageBundle is a Symfony bundle providing tools to resize uploaded and remote images before sending them through a classic form.

v5.0.0(1w ago)24158.1k↓51.9%19[2 issues](https://github.com/prestaconcept/PrestaImageBundle/issues)MITPHPPHP ^8.1CI failing

Since Oct 11Pushed 1w ago7 watchersCompare

[ Source](https://github.com/prestaconcept/PrestaImageBundle)[ Packagist](https://packagist.org/packages/presta/image-bundle)[ RSS](/packages/presta-image-bundle/feed)WikiDiscussions 4.x Synced 1w ago

READMEChangelog (10)Dependencies (18)Versions (41)Used By (0)

PrestaImageBundle
=================

[](#prestaimagebundle)

[![tests](https://github.com/prestaconcept/PrestaImagebundle/actions/workflows/tests.yml/badge.svg)](https://github.com/prestaconcept/PrestaImagebundle/actions/workflows/tests.yml/badge.svg)[![quality](https://github.com/prestaconcept/PrestaImagebundle/actions/workflows/quality.yml/badge.svg)](https://github.com/prestaconcept/PrestaImagebundle/actions/workflows/quality.yml/badge.svg)[![codecov](https://camo.githubusercontent.com/cddf67f7b86b2ecdd898b137721badbf45d549a2c66564357b77ade52e126aac/68747470733a2f2f636f6465636f762e696f2f67682f707265737461636f6e636570742f507265737461496d61676562756e646c652f6272616e63682f342e782f67726170682f62616467652e7376673f746f6b656e3d6c7334566a5435315069)](https://codecov.io/gh/prestaconcept/PrestaImagebundle)[![Latest Stable Version](https://camo.githubusercontent.com/d593e29a7a0ad203071ac1717f0a2215c05075dc7fcc2a327b8ae0d630b137a4/68747470733a2f2f706f7365722e707567782e6f72672f7072657374612f696d6167652d62756e646c652f762f737461626c652e706e67)](https://packagist.org/packages/presta/image-bundle)[![Total Downloads](https://camo.githubusercontent.com/6fe74b1cf4de034d213027b0f30b83b7e4f15deaf345421872efb0025a1bd128/68747470733a2f2f706f7365722e707567782e6f72672f7072657374612f696d6167652d62756e646c652f646f776e6c6f6164732e706e67)](https://packagist.org/packages/presta/image-bundle)

Overview
--------

[](#overview)

PrestaImageBundle is a Symfony bundle providing tools to resize uploaded and remote images before sending them through a classic form. It uses the [Cropper.js](https://github.com/fengyuanchen/cropperjs) library.

Installation
------------

[](#installation)

Make sure Composer is installed globally, as explained in the [installation chapter](https://getcomposer.org/doc/00-intro.md)of the Composer documentation.

### Applications that use Symfony Flex

[](#applications-that-use-symfony-flex)

Open a command console, enter your project directory and execute:

```
$ composer require presta/image-bundle
```

### Applications that don't use Symfony Flex

[](#applications-that-dont-use-symfony-flex)

#### Step 1: Download the Bundle

[](#step-1-download-the-bundle)

Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:

```
$ composer require presta/image-bundle
```

#### Step 2: Enable the Bundle

[](#step-2-enable-the-bundle)

Then, enable the bundle by adding it to the list of registered bundles in the `config/bundles.php` file of your project:

```
// config/bundles.php

return [
    // ...
    Presta\ImageBundle\PrestaImageBundle::class => ['all' => true],
];
```

Configuration
-------------

[](#configuration)

You must configure the `form_layout.html.twig` form theme into `config/packages/twig.yaml`.

```
twig:
    form_themes:
        - "@PrestaImage/form/form_layout.html.twig"
```

> Note: you can also create your own form theme instead.

You must include the routing into `config/routes.yaml`:

```
presta_image:
    resource: "@PrestaImageBundle/config/routing.yaml"
```

See VichUploader [documentation](https://github.com/dustin10/VichUploaderBundle/blob/master/docs/usage.md) to configure the bundle.

Assets
------

[](#assets)

See Cropper.js [documentation](https://github.com/fengyuanchen/cropperjs#getting-started) to install assets.

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

- `@PrestaImageBundle/public/css/cropper.css`
- `@PrestaImageBundle/public/js/cropper.js`

### How to: implementation examples

[](#how-to-implementation-examples)

- [Webpack Encore](https://github.com/prestaconcept/PrestaImageBundle/blob/master/docs/webpack.md)

Usage
-----

[](#usage)

### Initialize cropper

[](#initialize-cropper)

```
document.querySelectorAll('.presta-image').forEach(element => {
    new Cropper(element)
})
```

### Use the form type

[](#use-the-form-type)

```