Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

All other Modules /

Discuss all other Modules here.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

interactive cropping

Go to End

20 Posts   7034 Views

Xananax Prozaxx

Community Member, 11 Posts

2 May 2011 at 8:06am

I would need my publishers to be able to crop images dynamically from the admin panel, using (for example) jcrop; but the step would not be necessary. In the template, I would be able to call $Image.customCrop('thumbnail'), and the templating engine would fetch the 'thumbnail' data ($imageSizes['thumbnail']['width'] = 100, $imageSizes['thumbnail']['height'] = 70), and then check if a file exists. If the file does not, then it would revert to Silverstripe's native on-the-fly image generation and caching.
My requirements:
- Store custom models (thumbnail=>100x70; largeImage=>1024x768...), through _config
- leverage all of jcrops restrictions per-model (allow custom crop for a "articleImage", but enforce a ratio for "videoThumbnail")
- pop-up a modal window on post, but allow user to cancel it if he/she does not want to set a custom crop
- store the generated image in _resampled, like any other cached SS image, following the naming pattern in use.

I would be willing to contribute a module for all that, but I need a little help.
First of all, let me tell you how I envision this:
1) extend the $Image class, and add a method called customCrop($size, $height=NULL) which would allow to pass either a string as a single argument, or two numbers (width & height) to fall back to native behaviour (for quick development, you might not want to set all your sizes in the $sizes array from day one)
2) use a separate class for storing/retrieving sizes models, so this can be used independently from the javascript cropping behaviour (one might not need jcrop at all, but still find it handy to store presets and use them instead of always remembering the size of the website's thumbnails).
3) use the templating engine for rendition of the modal box, to allow power users to overwrite the admin window, or extend it.

So the loop would be:
A) in the template a customCrop('thumbnail') is found -> check the $sizes array for a key called 'thumbnail'
-> key found: retrieve width and height and revert to native ss behaviour (= fetch the file '_resampled/customCropWidthHeightfilename')
-> file found: return file
-> file not found: revert to setSize($sizes['thumbnail']['width'],$sizes['thumbnail']['height']), return the file
-> key not found: revert to setSize($defaultWidth,$defaultHeight), return the file
B) in the cms, a new $extendedImage object is created
-> check for permissions to crop, if permissions are ok:
-> get options for the $extendedImage (forced ratio, forced size, ....)
-> fetch, display the modal box
-> on submission, if there is data: generate the image, if no data, don't do anything

My questions:
1) Is there any SS project that goes in that direction, that I could fork/participate/simply use? I searched but didn't find any
2) How do I force a modal pop-up in the admin?
3) How can I use SS's native file storage function in order to write/retrieve a new _resampled image?
4) Can anyone provide pointers on how I should go from there? The loop A does not really pose any problem to me, but for the loop B (cms), I am completely lost
5) And finally, is anyone willing to contribute?

Xananax Prozaxx

Community Member, 11 Posts

16 May 2011 at 7:01am

I can't believe this doesn't interest anyone!
I mean, for a photographer's blog, or really almost any type of website that relies on images, this is a must!

Maybe I was too lengthy and I am making people run away; here is a short version:
how could I possibly give my admins the power to choose their crop/scale for images, and cache the result?


Forum Moderator, 1899 Posts

16 May 2011 at 9:25am

Hi Xananax Prozaxx,

I am not sure I follow the need for this... If the image is part of the template /layout then I'd see the image as being very fixed in size and the regular "crop" function with a non-dynamic width/height. When within content then I think people can set the width/height - I'm not sure if that is cached - is that what you are interested in? caching a user inserted image in, for example, a HTMLField?

Xananax Prozaxx

Community Member, 11 Posts

17 May 2011 at 12:58am

Edited: 17/05/2011 12:59am

Hello Swaiba.
Thanks for replying :)

No, I know they can resize pictures in content, but I am not interested in this.
I want them to be able to resize pictures that are used in template, for examples images that are attached to a custom Page or DataObject class.

What I am interested in is let my posters decide which part of the image they want to crop;

Let us say I am making a gallery for a painter. By design, my thumbnails are all square; but her paintings have very variable widths and heights, sometimes long, sometimes short. If I let the automatic crop take care of it, the thumbnails might very well not be representative of the image at all; or my client, an artist, might be horrified when seeing how her work gets mutilated;
So I want to her to be able to choose, with a dynamic JS script such as jcrop, which part of the image she wants to crop.
If she doesn't, then I revert to default behaviour which is let SS take care of the resizing/cropping.
This goes for thumbnails, but could also go for all images sizes in layout (search preview, preview in gallery, thumbnail accompanying article...).

I chose an artist's website to make things obvious, and it seems like a particular case, but it isn't.
In most cases, I end up doing the croppings on photoshop to get the thumbnails looking good for my clients. A machine will never be able choose the most relevant part of an image, so the functionality I am planning to create applies to really everything. A few examples:
- product photos: You have a big picture showing a car you are selling; you want the thumbnail to show the car, not half the car and half the background
- People's photo: you want the thumbnail to show the face of the person, not a chin and a tie;
- large photos: the thumbnails show nothing (too much detail), you'd rather zoom in on a detail in the thumbnail to show a mood rather that have the whole photo resized
and so on...

Of course, there is the obvious way of adding two fields, one for the image, and one for the thumbnail, and let my clients crop their thumb on photoshop, but that's kind of outdated and complex (also requires PS or another image editor to be installed). I would want an image cropper to pop-up after upload; it's much more straightforward and easy to understand. Less prone to errors too. Plus, it would benefit from SS's caching system. Want to refresh all thumbnails? just delete the cache (as opposed as re-upload new thumbs for each image).


Forum Moderator, 4102 Posts

17 May 2011 at 4:50pm

Hi, guys... I've done this before for a couple projects. It's really not that bad. I'll write up a tutorial on my blog when I get a chance.

Xananax Prozaxx

Community Member, 11 Posts

17 May 2011 at 9:57pm

Hello UncleCheese.
Thank you for the proposal, but...I need this for a project I am working on right now.
I don't mean to be pushy, it's just that I am kind of in a hurry. If I can't get this to work, I can't use SS for that project right now, and it would really be too bad (I like SS a lot, and I have already done most of the website implementation already).
Any pointers, or sample module, to hook new functionality in the admin panel after an upload, before a full post?

Terry Apodaca

Community Member, 112 Posts

28 May 2011 at 10:50am

I am a very impatient person so I didn't read all of the initial post...but the title of the post is what caught my eye.

I need to do something very similar (I think): Interactive Cropping

I have found this jQuery plugin and it does exactly what I want it to now i need to figure out how to implement this into a DOM so that:
1. The client uploads a new ProductImage.
2. The client can then pick a spot on that ProductImage that best represents the 'Color' of that image.
3. Saves both the ProductImage and the 'cropped' thumbnail (which is given a specific WxH).
4. and on the front end I would like to reference the Main image and the thumbnail in another jQuery plugin so that when the end user hovers over the thumb....that main image shows...similar to this: [url=] or even better with this [url=]

Sounds like a perfectly good and normal 'Slider' except my client is pretty adamant about having this facebook style thumbnail selecting where she can select any portion of the image she just uploaded that best represents the color of her product. jQuery plugin

But, how to implement this in the CMS, using the DOM to manage all the image objects that can be uploaded to a single product...?

Xananax Prozaxx

Community Member, 11 Posts

29 May 2011 at 6:10am

Yup. This is what I am looking for too. I am quite amazed that this post does not generate more discussions. In my view, for any CMS, this is a really important, mandatory feature. I know some things are more important, so I understand why it isn't already available. But I am astonished that when someone (me) proposes to develop a plugin for it, it gets so little feedback, and virtually no help.

I mean common people, anything could help, a sample module, some pointers to what to look for in the API, really anything.
Anyway, it's ok, I am not here to rant...I feel just a bit let down.

Since my client only needs to upload images, I am thinking of implementing an upload form front-side that shows only when the user is logged in, and ditch the cms totally.
Will work for my needs right now, but it's a shame, I'd really like to make this work without awkward workarounds.
Anyway, if I ever get somewhere I'll share my updates in this thread.

Go to Top