Symphony.

This extension adds image cropping functionality to upload fields.
alpha version, for feedback and testing only

Image Cropper

• Version: 0.1 alpha
• Author: Jonas Coch (jonas@klaftertief.de)
• Build Date: 2009-10-7
• Repository: http://github.com/klaftertief/imagecropper
• Requirements:
  • Symphony CMS 2.0.6 or newer: http://github.com/symphony/symphony-2
  • Modified JIT Image Manipulation extension for frontend output: http://github.com/klaftertief/jit_image_manipulation

Adds image cropping functionality to upload fields.

Installation

1. Upload the ‘imagecropper’ folder in this archive to your Symphony ‘extensions’ folder.

2. Enable it by selecting the “Field: Image Cropper”, choose Enable from the with-selected menu, then click Apply.

3. You can now add the “Image Cropper” field to your sections.

Notes

• This is an alpha version. Don’t use it on live sites.

Things on my TODO list

• Data Source functionality
• “Make this a required field” option
• adjustable output in content overview table
• cropping in modal window
• implementation of wishes

Screenshots

Bigger Version

Bigger Version

Nice!

Great job!

Tested it out last night and got it working. Very cool! I’m super excited to be able to use this in future projects. Thanks a bunch for your hard work on it. Do you want more specific comments at this point?

Neato! Great implementation.

Thanks.
Any comments are welcome, be it bug reports, wishes for features or suggestions for improvements. The more specific the better.

Great work! I haven’t tested this extension yet, but I would like to know if the original image is also uploaded and saved somewhere.

@carsten The extension doesn’t upload or modify any files. The image manipulations for the frontend output are handled by a modified JIT version. When you add an Image Cropper field to a section you have to define a relation to an existing upload field. In the edit page for your entry the images get appended via JavaScript and only the cropping coordinates are saved in the database. This way you can have differently cropped and sized versions of one master image.

Of course, it’s the best and most logical way to do it :)

For one Symphony site I am managing I am using Monoslideshow for an image rotator with the Ken Burns effect. Now, the coordinates have to be entered manually and this is a true pain for other people who also want to edit the pictures. Although this functionality can nowadays be executed with jQuery too, if I find some spare time I will see if I can modify this extension to get the starting and ending coordinates for this effect (and perhaps provide code so it can be used in the front-end with the jQuery plugin). I think this extension provides a highly useful base for that.

There is an updated version of the extension available at github. I’m calling it a beta now. For frontend output and the display of thumbnails in backend entry lists you need a modified version of the JIT extension.

What’s new?

• The jCrop mode of JIT expects a url like /image/4/crop_width/crop_height/crop_x/crop_y/resize_width/resize_height/path/to/image.jpg. resize_width and resize_height should either equal crop_width and crop_height (no resizing) or one should be 0 and the other smaller than the crop value (proportional resize).
• You can create and copy and copy’n’paste an URL from the backend edit page. I hope this can be used for a future Mediathek integration.
• You can add a filter to your datasource. The syntax is like width: >200, height: <=300, cropped: yes and ratio: >1.
• I removed Crop in modal-funcionality.
• There is an optional thumbnail preview in entry overview tables.

What’s next?

Testing, feedback and coding -> into the download area…

klaftertief this is an amazing start, well done :-) Our clients are going to love this.

I have a few questions/comments as I tried installing and using this:

• at first it wasn’t clear that this field wasn’t an upload field. In the README it would be worth stating (since this is a good feature) that the cropper works in conjunction with various file upload field types (and recommend the user limits the uploads of that field to only images!)
• the “Related field” option when configuring this field confused me because it was initially filled with upload fields from all sections (I was creating a new section). Since it was a required selection, I had to select a field from another section, re-save, then choose my new upload field. Might be worth mentioning in the docs to add the Image Cropper after you’ve already saved the section with the upload field in it.
• it wasn’t clear to me that the four min/max input fields referred to the cropping area and not the allowable dimensions of the source image
• I love how massive images are scaled down ready for cropping. Rather than resizing them in the browser would it be worth doing this scaling also using JIT? Might be faster for the user, particularly if it’s a 2MB JPEG from their digital camera! (Also brings up a point about maximum image file sizes, but that is a discussion for upload fields, not the cropping field)
• Maybe 7.30am was too early to get my head around it, but I didn’t understand the “Resize proportionally after cropping” and “Dimension” slider. What does this do?
• I think the UI with the “Toggle URL” could be refined a little more. I thought “Reset” was floating on its own
• I made the field Required but it still allowed me to save the entry without cropping
• Should the field show the URL textbox when a new entry is being created?
• I installed the updated JIT extension but couldn’t get the crop URL to work. Does it need an additional RewriteRule?

I hope that it doesn’t sound like I’m picking holes. Far from it — this looks really promising indeed. But I’m also wary of exposing too much control to non-technical clients to whom I’d want to expose the draggable cropper and no other options.

Great work!

Thanks Nick for your feedback.

Your first points are mainly related to the documentation. I will address this before I’m going to publish the extension. When you add the field to an already existing section, the Related field option will only display upload fields from the current section.

jCrop offers the ability to use scaled images. So it shouldn’t be to hard to implement an option for pre-JITed images.

Probably 1:30am was too late to implement the Resize proportionally after cropping and Dimension feature. The options define how the URL for the JIT mode in the URL input will be constructed. The URL doesn’t get saved and is only for copying. The idea is to give authors the possibility to create an URL for usage in textareas or for posting it somewhere. This feature should only be activated with in the configuration of the field. Maybe some proper documentation in the README an in the edit entry page is enough?

The Required option doesn’t have an effect at the moment. It’ hard to implement because the image has to be uploaded before the extension can grab the URL. So the Required option should only be checked when there is already an image uploaded. Any ideas how this should be implemented?

Should the field show the URL textbox when a new entry is being created?

What do you mean with this?

The JIT extension doesn’t require an additional RewriteRule. Maybe you have to reinstall JIT? The best way to test it should be to copy the created URL in the imagecropper field. (The x2, y2 attributes in the generated XML are not necessary. I put them there before I modified the JIT extension.)

Do you think it’s enough to have the Create URL feature as a configurable advanced option for the non-technical users?

Finally got this working with scaling as well.. Oh my god.. guys this is the icing on the cake for me at the moment… Thank you very much klaftertief.

Mediathek integration while on the page I’m editing is a bit long winded.. i.e can upload and create entry using mediathek but can’t then edit/resize while still editing the section entry.. have to go to where all the images are stored to do the resizing!.. still… Loving it though! as Nick said.. Amazing =>

Mediathek integration while on the page I’m editing is a bit long winded.. i.e can upload and create entry using mediathek but can’t then edit/resize while still editing the section entry.. have to go to where all the images are stored to do the resizing!.. still… Loving it though! as Nick said.. Amazing =>

I haven’t tried the current version of Jonas’ extension but are these problems Mediathek related in any way?

Noop.. just workflow issues that I can’t quite get my head round.. not sure where to post it though as it connects mediathek and Image Crop extensions..

I haven’t tried the current version of Jonas’ extension but are these problems Mediathek related in any way?

At the moment there is no integration with the Mediathek, Nils. There are two independent ways of a real integration.

1. Cropping directly in the Mediathek
2. Drop’n’Crop (on textareas)

The first would be possible with an Edit related image entry mode (like the Create new mode) in the Mediathek. The second would need something like a modal dialog with cropping functionality that modifies the created URL of the image. You can do this directly in an imagecropper field. Nick Dunn mentioned some confusion about this functionality. So maybe it would be an option to have the URL creation in a modal dialog and that you could call this dialog after dropping an image from the Mediathek.

I currently can’t focus on Mediathek development in my spare time but our two extensions should definitely work well together. But we talked about that earlier. I hope there will be some time for Mediathek improvements in early 2010.

Nice one.. Nils It all works fine out of the box, just tweaks for client useability I guess is where it needs a bit of thought not knocking anyones work in any way! You guys can code, I can’t yet :)

where do I post a bug with Image Crop?

I’m on Symphony 2.0.4 and it seems when I click: Yes, Set width or Yes, Set height in the “Resize proportionally after cropping” option it removes the “S” from my submitted folder url in the URL field below it!

anyone else found this?

EDIT

It’s when I use the slider or try and crop on the actual image I see it happening and not when I select the crop proportially options..

Since the extension is only available directly at github, you should post issues there. Thanks.