2

Some of the images on my site will be used in multiple sizes and aspect ratios. I would like for the client to only have to upload one version of each image (the original size) and have the site automatically size and crop the images according to the location requirements. However, one of the aspect ratios is a very wide and short image (let's call it a "banner"). I am able to get CE Image to display the image in the proper dimensions, but it crops off the bottom and top of the image and saves a strip from the middle. Most of the time that's just fine, but some of the images don't lend themselves well to that particular cropping (subject matter is off-center). Right now, I got around this by adding an additional file field for the client to crop the image manually and then upload it for the page banner. Is there a way instead to do this with only one image being uploaded but allowing the client to specify the region of the image to use for the page banner? Something like jCrop? Is there an add-on that with this feature?

I am using Assets and CE Image.

Thanks! Amy

2 Answers 2

3

Would something like this Image Editor add-on work for what you need?

http://devot-ee.com/add-ons/image-editor

Another solution might be add select fields to allow the client control the crop position parameters for CE Image. For instance, if you had a select dropdown field called {horizontal_crop} with the values "left, center, right" and another dropdown field called {vertical_crop} with the values "top, center, bottom."

Then your tag would look something like this:

{exp:ce_img:single src="{my_custom_image}" width="200" height="130" crop="yes|{horizontal_crop},{vertical_crop}"}

If you also add the ability to preview the image in place in the page with something like NSM Live Look, the client could more easily select an appropriate cropping method.

2
  • Where would I add the select lists? In the custom fields for the Pages channel where this image is selected? Or is there a way to tie it to the image itself in Assets?
    – Amy Witty
    Mar 13, 2013 at 14:46
  • The example I'm gave would be for adding the select dropdowns to your channel entry. It would make sense there since you are essentially selecting how to handle the image cropping in that particular context. That same image asset could then be used somewhere else, theoretically, with a totally different treatment.
    – Alex Roper
    Mar 13, 2013 at 23:44
0

You can use the Image Manipulation feature of ExpressionEngine : http://ellislab.com/expressionengine/user-guide/cp/content/files/file_upload_preferences.html

1
  • unfortunately the default Image Manipulation functionality of ExpressionEngine doesn't allow control over the cropping either. It just gives you the center region of the image, too.
    – Amy Witty
    Mar 12, 2013 at 19:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.