PHPackages                             teaocha/sonata-admin-image-panel - 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. teaocha/sonata-admin-image-panel

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

teaocha/sonata-admin-image-panel
================================

Symfony bundle that adds a page and modal popup to the sonata admin that lets you upload, crop, and browse images

v1.0.3(10y ago)119MITPHP ^5.3.9|^7.0

Since Apr 21Compare

[ Source](https://github.com/Matteaocha/TeaochaSonataAdminImagePanel)[ Packagist](https://packagist.org/packages/teaocha/sonata-admin-image-panel)[ RSS](/packages/teaocha-sonata-admin-image-panel/feed)WikiDiscussions Synced 1mo ago

READMEChangelog (3)Dependencies (3)Versions (7)Used By (0)

TeaochaSonataAdminImagePanel
============================

[](#teaochasonataadminimagepanel)

Symfony2 bundle that adds a page and modal popup to the sonata admin that lets you upload, crop, and browse images

[![alt tag](https://camo.githubusercontent.com/d1a5375ee00af8de9cb40fc3c1f93b908962c6313ceed2305997bfb2082b5cc1/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6d61747465616f6368612d696d616765732f5465616f636861496d61676550616e656c312e6a7067)](https://camo.githubusercontent.com/d1a5375ee00af8de9cb40fc3c1f93b908962c6313ceed2305997bfb2082b5cc1/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6d61747465616f6368612d696d616765732f5465616f636861496d61676550616e656c312e6a7067)

### How it works

[](#how-it-works)

- Install the bundle
- Add the bundle routing and redirect sonata to use the bundle's template
- Create a service that handles the image data uploaded and returns a url to a preview image
- An image panel option appears in the menu
- You can upload, browse, delete, and crop images in the panel
- You can also upload urls for external images
- You can add a button next to any text box on an edit page that opens the panel in a modal view and returns the selected image's url into the text box
- The bundle also includes the CKEditor standard edition, configured to use the image panel for images

### Installing

[](#installing)

First require the bundle:

```
composer require teaocha/sonata-admin-image-panel

```

Add it to your kernel

```
class AppKernel extends Kernel
{
  public function registerBundles()
  {
    $bundles = array(
      new Teaocha\SonataAdminImagePanelBundle\TeaochaSonataAdminImagePanelBundle(),
    );
  }
}

```

Install the assets:

```
php app/console assets:install web

```

Add the routing:

```
teaocha_image_panel:
  resource: '@TeaochaSonataAdminImagePanelBundle/Resources/config/routing.yml'

```

Tell sonata to use the bundle's layout:

```
sonata_admin:
  templates:
    layout:  "@TeaochaSonataAdminImagePanelBundle/Resources/views/admin_layout.html.twig"

```

### Creating the request handler

[](#creating-the-request-handler)

Given that there are all sorts of ways you may want to store your or process your images I thought it best to leave the image handling up to you, so in order for the bundle to work you have to create a service that handles the requests.

Here's what it should look like:

```
use Teaocha\SonataAdminImagePanelBundle\Request\RequestHandlerInterface;
use Teaocha\SonataAdminImagePanelBundle\Request\RequestResult;

class ImagePanelRequestHandler implements RequestHandlerInterface
{
  public function imageUpload($imageData, $contentType){

    //Do something with the image data

    $requestResult = new RequestResult()
    $requestResult->setPreviewUrl($url);
    $requestResult->setId($id);
    return $requestResult;
  }

  public function imageUrlUpload($imageUrl){

    //Do something with the url

    $requestResult = new RequestResult()
    $requestResult->setPreviewUrl($url);
    $requestResult->setId($id);
    return $requestResult;
  }

  public function deleteImage($id){
    //Delete the image
  }

  public function listImages(){

    //Generate an array of RequestResult objects

    return $results;
  }
}

```

Your service should implement the **RequestHandler** interface

There are then four functions for you to fill in:

**imageUpload** receives a **base64** encoded data string (NOT including 'data:image/\*;base64,'), and a content type (e.g. 'image/jpeg') which you should process in your own way and return a RequestResult object (see below)

**imageUrlUpload** receives a url from an external image. Again, do what you will with it and return a RequestResult object.

**deleteImage** receives an id that should refer to a record of an image previously uploaded. You don't need to return anything.

**listImages** is used to populate the image panel. It should return an array of RequestResult objects

**RequestResult** is a simple object that requires two fields to be set:

- setPreviewUrl()
- setId()

The 'preview url' is the url that will be used to show the image in the panel, and the 'id' should be a numeric id that refers to that image

Once you've done that, add the service and tag it with **teaocha.image\_panel.request\_handler**:

```
app.image_panel_request_handler:
  class: AppBundle\Services\ImagePanelRequestHandler
  tags:
    - { name: teaocha.image_panel.request_handler }

```

### Adding a button to a text field

[](#adding-a-button-to-a-text-field)

You can add a button to any text input in the admin that looks like so:

[![alt tag](https://camo.githubusercontent.com/ecd53b64e04ff34ff69bb7b35326e9007757b1916ea76445fe15610ee1a96b37/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6d61747465616f6368612d696d616765732f5465616f636861496d61676550616e656c322e4a5047)](https://camo.githubusercontent.com/ecd53b64e04ff34ff69bb7b35326e9007757b1916ea76445fe15610ee1a96b37/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6d61747465616f6368612d696d616765732f5465616f636861496d61676550616e656c322e4a5047)

Do this by adding a button with class **teaocha-image-panel-url-btn** to the help option of the admin field:

```
protected function configureFormFields(FormMapper $formMapper)
{
  parent::configureFormFields($formMapper);

  $imagePanelButton = 'Open image panel...';

  $formMapper
  ->with('New product')
    ->add('title', 'text')
  	->add('content', 'textarea', array('attr' => array('class' => 'ckeditor')))
  	->add('productImageUrl', 'text', array('help' => $imagePanelButton))
  ->end();
}

```

### Using the bundle with CKEditor

[](#using-the-bundle-with-ckeditor)

The bundle includes the [CKEditor](http://ckeditor.com/) standard edition in its assets. The editor is configured to use the image panel for browsing images. When you click the image icon on CKEditor's dashboard there will be a button next to the URL input which says 'Browse Server'; clicking that will open the panel.

The bundle's admin dashboard layout includes the necessary script tags to use the editor so all you have to do to get it to appear in an edit form is add the 'ckeditor' class to a form textarea (see example above).

If you are already using CKEditor and don't want to override your current settings you'll have to edit my layout file and remove the line which includes ckeditor. Then, to use the image panel, go into config.js of the editor and add the line:

```
config.filebrowserBrowseUrl = "/admin/images/ckeditor"

```

### Credits

[](#credits)

Additional credits go to [Cropper](http://fengyuanchen.github.io/cropperjs/), because that's what i've used for image cropping

### Notes

[](#notes)

Right now the panel only uploads data strings in the jpeg format

###  Health Score

27

—

LowBetter than 49% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity62

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~107 days

Recently: every ~133 days

Total

6

Last Release

3136d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/baa8cc00a906493bbc80e1ab106e6251be7c973473ab2dca3c5ad2fbfcc9f6de?d=identicon)[Matteaocha](/maintainers/Matteaocha)

---

Top Contributors

[![Matteaocha](https://avatars.githubusercontent.com/u/8561953?v=4)](https://github.com/Matteaocha "Matteaocha (16 commits)")

---

Tags

imagesuploadCKEditorcropsonatapanel

### Embed Badge

![Health badge](/badges/teaocha-sonata-admin-image-panel/health.svg)

```
[![Health](https://phpackages.com/badges/teaocha-sonata-admin-image-panel/health.svg)](https://phpackages.com/packages/teaocha-sonata-admin-image-panel)
```

###  Alternatives

[unisharp/laravel-filemanager

A file upload/editor intended for use with Laravel 5 to 10 and CKEditor / TinyMCE

2.2k3.3M73](/packages/unisharp-laravel-filemanager)[sonata-project/media-bundle

Symfony SonataMediaBundle

4625.5M71](/packages/sonata-project-media-bundle)[tilleuls/ckeditor-sonata-media-bundle

Integrates SonataMediaBundle with CKEditor

53531.4k1](/packages/tilleuls-ckeditor-sonata-media-bundle)[comur/image-bundle

A bundle providing fields for image upload with jquery upload and image cropping with jcrop for symfony2

104119.4k](/packages/comur-image-bundle)[contributte/image-storage

Image storage for Nette framework

28749.3k1](/packages/contributte-image-storage)[noam148/yii2-image-manager

A Yii2 module/widget for upload and cropping images

12914.8k](/packages/noam148-yii2-image-manager)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)