Home
- Copy the pixlr folder to the root of your silverstripe instance and run dev/build (this folder MUST be called pixlr, not silverstripe-pixlr as it may come out of the archive)
- If you are running a publicly accessible website, 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
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.