SilverStripe

The Pixlr Image Editor module allows users to edit images directly within SilverStripe using the free online Pixlr service. Users can create new images directly from SilverStripe's WYSIWYG editor toolbar, and edit existing images stored in the Files & Images asset library. 

 

Overview

It's pretty straightforward - edit images in a proper image editing application directly from within SilverStripe. 

If you'd like to test out the editor first to see whether it's right for you, check http://pixlr.com/editor/ 

Installation Instructions

 

 

• Copy the pixlr folder to the root of your silverstripe instance and run dev/build
• If you are running a publicly accessible website (ie, the images are all publicly available), you will get a noticeable speed increase by using a crossdomain.xml (a sample is provided in the module subdirectory) at the root of your website so that the pixlr application can directly access the image files it needs. Make sure to set PixlrEditorField::$use_credentials to TRUE in your mysite/_config.php

 

 

Developers

The Pixlr module makes use of the JS api provided by pixlr via http://developer.pixlr.com, which is itself wrapped up in a very simple jQuery plugin. This API allows us to overlay the editor directly over the current page the user is viewing. The flow control looks something like the following

 

When editing or creating

 

• User clicks the "edit" link next to an image or the "Create new" button
• getCMSFields() of the PixlrImageDecorator adds a "PixlrEditorField" to the list of fields, which inserts some JS into the page which triggers jQuery to bind to the edit button
• User clicks "edit" button, which triggers the jquery plugin to make an ajax call back to silverstripe/pixlr/sendimage. This actually uploads the image to the Pixlr servers - this mechanism gets around any problems with your server being behind a firewall or located on an intranet. sendimage returns the token used to be able to open that image later.
• jQuery plugin then launches the pixlr overlay (with appropriate configuration params and filename as returned by the call to sendimage)
• User edits the image in pixlr, clicking save when they're done. Pixlr returns the user to a URL within the CMS (silverstripe/pixlr/saveimage)
• PixlrController::saveimage determines whether the image being edited was a "new" image, in which case it shows the user a form containing fields to specify a location and (if the name is not unique) a new name for the image. This is rendered in PixlrController_saveimage.ss. If the image is an existing image, the PixlrController::storeimage action is called directly, bypassing the form display
• The PixlrController::storeimage action first determines if there is enough info to save the image; if not, the user is redirected back to saveimage which uses the same logic and displays the user the form to provide data
• The image is then downloaded from the location on pixlr's servers and stored in SilverStripe's assets folder. If it is a new image, a new object is created and populated. If it's an existing image, the existing renditions are recreated, and if the fileversioning module is installed, a new file version is created.
• The PixlrController_storeimage.ss template is displayed which will search for the appropriate pixlr javascript object and close the overlay.
• Note that without the ‘crossdomain.xml' file in place, and your website being publicly accessible, this plugin will first upload the image to the pixlr servers. This is all controlled by setting PixlrEditorField::$use_credentials to true in your mysite/_config.php file - without this set, the edited file will always be uploaded to pixlr which does incur a performance hit while the file uploads. Be aware that if your images are protected (eg by the SecureFiles module), you should leave the default behaviour; otherwise, Pixlr will not be able to access your files.

 

 

Release(s)

• Latest release

  Version: [v1.0.4]
  Date: 2010-10-27
  Compatible with: SilverStripe 2.4
  Download: svn.github.com-silverstripe-pixlr.git-r60.tar.gz
  

  Subversion access: http://svn.github.com/nyeholt/silverstripe-pixlr.git

• Older release(s)

  Version: [v1.0.2]
  Date: 2010-10-19
  Compatible with: SilverStripe 2.4
  Download: svn.github.com-silverstripe-pixlr.git-r60.tar.gz
  

  Subversion access: http://svn.github.com/nyeholt/silverstripe-pixlr.git

  Version: [v1.0.0]
  Date: 2010-10-01
  Compatible with: SilverStripe 2.4
  Download: svn.github.com-silverstripe-pixlr.git-r60.tar.gz
  

  Subversion access: http://svn.github.com/nyeholt/silverstripe-pixlr.git

• Latest trunk build

  To get a preview of our next release, download the latest build of unstable trunk here. Please be careful: this is more likely to contain bugs, especially on modules undergoing a lot of development.
  
  Revision: #60
  Build Date: 2012-06-25
  Download: svn.github.com-silverstripe-pixlr.git-r60.tar.gz
  

  Unstable Subversion access: http://svn.github.com/nyeholt/silverstripe-pixlr.git