26 users Sign-in to change your status

Effortlessly add user-croppable images to your models with an incredibly easy-to-use javascript image cropper (jcrop). The plugin will also automatically create and save the cropped images for you, in sizes you can configure. JavaScript Widget Behavior jQuery Forms Model Backend

• Repository
• Download package
• Browse source

This plugin allows you to effortlessly add image editing capabilities to your admin generator backend. You'll be able to add images to your models and be presented with the awesome Jcrop (http://deepliquid.com/content/Jcrop.html) jQuery plugin.

Features

The plugin already has a few very useful features

• Create as many different sized crops of each of your image fields as you like
• Add any amount of coloured padding around the croppable image
• Fix the aspect ratio of the cropper to add consistency to your images' dimensions
• Change the directory that uploaded images are stored in
• Use the getImageSrc() method in your frontend app to easily display your neatly cropped images

Developers

Name	Status	Email
Rich Birch	lead	moc.latigidciffart <<ta>> hcir

License

Copyright (c) 2008 Rich Birch

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is furnished
to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

Releases for sf 1.4

Version	License	API	Released
1.0.7stable	MIT license	1.0.7stable	20/01/2010
1.0.6stable	MIT license	1.0.6stable	12/01/2010

Releases for sf 1.3

Version	License	API	Released
1.0.7stable	MIT license	1.0.7stable	20/01/2010
1.0.6stable	MIT license	1.0.6stable	12/01/2010
1.0.5stable	MIT license	1.0.5stable	17/11/2009
1.0.4stable	MIT license	1.0.4stable	11/11/2009

Releases for sf 1.2

Version	License	API	Released
1.0.7stable	MIT license	1.0.7stable	20/01/2010
1.0.6stable	MIT license	1.0.6stable	12/01/2010
1.0.5stable	MIT license	1.0.5stable	17/11/2009
1.0.4stable	MIT license	1.0.4stable	11/11/2009
1.0.3stable	MIT license	1.0.3stable	16/10/2009
1.0.2stable	MIT license	1.0.0stable	13/10/2009
1.0.1stable	MIT license	1.0.0stable	12/10/2009

Join this plugin team

Other releases

Release 1.0.7 - 20/01/2010

Release 1.0.6 - 12/01/2010

Release 1.0.5 - 17/11/2009

Release 1.0.4 - 11/11/2009

Release 1.0.3 - 16/10/2009

Release 1.0.2 - 13/10/2009

Release 1.0.1 - 12/10/2009

sfDoctrineJCroppablePlugin

This plugin allows you to effortlessly add image editing capabilities to your admin generator backend. You'll be able to add images to your models and be presented with the awesome Jcrop (http://deepliquid.com/content/Jcrop.html) jQuery plugin.

Features

The plugin already has a few very useful features

• Create as many different sized crops of each of your image fields as you like
• Add any amount of coloured padding around the croppable image
• Fix the aspect ratio of the cropper to add consistency to your images' dimensions
• Change the directory that uploaded images are stored in
• Use the getImageSrc() or getImageTag() method in your frontend app to easily display your neatly cropped images

Installation

To install the plugin for a symfony project, the usual process is to use the symfony command line:

php symfony plugin:install sfDoctrineJCroppablePlugin

sfDoctrineJCroppablePlugin depends on the excellent sfImageTransformPlugin, but until I can figure out how to specify that dependency in the package then you'll have to install it yourself (it's getting late!)

php symfony plugin:install sfImageTransformPlugin

If the installation of either package fails (because you're running symfony 1.3 for example) then you can manually download the tgz files from

http://plugins.symfony-project.org/get/sfImageTransformPlugin/sfImageTransformPlugin-1.2.0.tgz
http://plugins.symfony-project.org/get/sfDoctrineJCroppablePlugin/sfDoctrineJCroppablePlugin-1.0.2.tgz

and then ask symfony to install the downloaded files

php symfony plugin:install sfImageTransformPlugin-1.2.0.tgz
php symfony plugin:install sfDoctrineJCroppablePlugin-1.0.2.tgz

Enable the plugins if necessary by editing config/ProjectConfiguration.class.php:

$this->enablePlugins(array('sfDoctrinePlugin', 'sfImageTransformPlugin', 'sfDoctrineJCroppablePlugin'));

Symfony 1.2 & Doctrine 1.0

If you're using symfony 1.2 which comes with doctrine 1.0 this plugin will not be able to delete the old versions of its images when it creates new ones. This is because we've not been able to find a way of getting the old filename. Upgrading to doctrine 1.1 fixes this and is a reasonably straightforward exorcise. There is a good guide here:

http://www.brandonturner.net/blog/2009/05/doctrine11-with-symfony12/

Symfony 1.3 comes with doctrine 1.2 and so this is not an issue.

Usage

You'll first want to edit config/doctrine/schema.yml to add the behaviour to one of your models:

Person:
  actAs:
    JCroppable:
      images: [ mugshot ]
  columns:
    first_name:  { type: string(128), notnull: true }
    last_name: { type: string(128), notnull: false }

Here we have told the plugin we want one jcroppable image field called mugshot. The plugin will take care of the creation of the relevant fields in the person table.

Now we've updated/created our schema, we can tell symfony to rebuild our database.

Caution! This step will erase any data in the database that is not included in any fixtures:

php symfony doctrine:build-all-reload

Next let's configure sfImageTransform to use the gd library and to auto-detect images' mime-types (apps/backend/config/app.yml)

all:
  sfImageTransformPlugin:
    default_adapter: GD
    mime_type:
      auto_detect: true
      library: gd_mime_type

If you haven't aleady done so let's create an admin module for our person model:

php symfony doctrine:generate-admin backend Person --module=person

The plugin also depends on the jquery & jcrop libraries, so you must download them (http://deepliquid.com/content/Jcrop.html) and place the two js files (jquery.Jcrop.min.js & jquery.min.js) in web/js, and the css file (jquery.Jcrop.css) in web/css:

web/js/jquery.min.js
web/js/jquery.Jcrop.min.js
web/css/jquery.Jcrop.css

Now we need to tell our module's view to include them. We can do this specifically for our module by editing apps/backend/modules/person/config/view.yml, or for the whole application by editing apps/backend/config/view.yml:

default:
  javascripts:    [jquery.min.js, jquery.Jcrop.min.js]
  stylesheets:    [jquery.Jcrop.css]

We're almost finished now! Just two things left to do. First we have to configure the widget & validator for our jcroppable image field. Add the following calls to configure the widgets & validators to the form's configure function (lib/form/doctrine/PersonForm.class.php):

public function configure()
{
  $this->getObject()->configureJCropWidgets($this);
  $this->getObject()->configureJCropValidators($this);
}

And finally create the upload directory for the images to be stored in and make them writeable:

mkdir -p web/uploads/images/Person
chmod 777 web/uploads/images/Person

That's it! Now if you followed the instructions carefully then you should be able to aim your browser at the backend app's person module and add a few people and their mug shots.

To show the images in your frontend templates, simply pass a Person object, and call the getImageSrc() or the getImageTag() function, passing the desired image & size, eg

<img src="<?php echo $person->getImageSrc('mugshot', 'thumb') ?>" alt="Mug shot!" />

or

<?php echo $person->getImageTag('mugshot', 'thumb') ?>

Configuration

Now the above example has used a load of default values which you'll almost definitely want to configure. Here's an example of some config you can place in your config/app.yml:

all:
  sfDoctrineJCroppablePlugin:
    models:
      Person:
        directory:    people
        images:
          mugshot:
            padding:    { percent: 35, color: #ffffff }
            ratio:      1.5
            sizes:
              thumb:    { width: 450 }
              main:     { width: 675 }

Let's run through these options:

• directory - overrides the default web/uploads/images/Person to instead be web/uploads/people
• padding - adds padding to the image, of the specified color, using either a 'percent' or 'pixels' value
• ratio - fixes the aspect ratio of the cropper and therefore the generated cropped images
• sizes - allows you to specify any number of different sized images to be created. You specify the width and the height will be calculated using the ratio if there is one, otherwise it will be variable according to the selected crop. The default sizes are thumb (width 120px) & main (width 360px)