Why would you an image fill a box? Would you not just place the image and apply a border to it?

Because that is the design (not mine I hasten to add!) and the images are chosen / uploaded by the user. So, in order to keep it from looking scrappy (as is the request from the designer!!) the only option I can see is to fill one side and crop, if necessary, the other.

Unfortunately, I cannot control the users - they will be shop owners / workers and will either be good with the web ... or not ...

Unfortunately, I also cannot "control" the designer ;-)

Any chance you could screenshot the design and post it? Just so I have a better idea of what you are trying to do - if it is condifential then just email it to me but I can't visualise why you can't achieve what you want by using an FO border or imagegen to manipulate the image.

Thanks!

Darren - I have emailed you a PDF

Hi Gordon,

From what I can see of your layout I'd probably use Imagegen to crop and scale the images to a certain width/height - There is a free version and the cropping and scaling is done via url parameters so you just use the image gen URL in your fo:external-graphic tag.

You could also look at writing an Umbraco event handler to crop and scale the images upon import or look into DAMP (which i hear is good at creating standard crops of images - but I haven't tried it personally).

ANother option is to use jCrop to allow the users to make the crop when they their image.  You can set an aspect ratio which constrains the final image to that proportion.  This eliminates the guesswork on whether you are making the crop at the right place.

http://deepliquid.com/content/Jcrop.html

I followed this simple ASP.Net tutorial to implement jCrop in Umbraco and save the cropped image to the server:

http://www.mikesdotnetting.com/Article/95/Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET

Darren - I thought cropping was only in the Pro version of ImageGen ... I will take another look. I still need to figure out which side will fill so that the other can be cropped (i.e. not be too short!).

Barry - honestly, the type of user that we are dealing with here would freak at the concept of scaling and/or cropping their own images!!! Getting them to upload them in the first place will be an achievement ;-)

The problem with auto cropping or resizing is that I need to work out which side to resize and where to crop ...

I'd iterate the images, determine the widest and crop the other two to match that width.

To be honest I would do that in a post document save event - i think it would get messy trying to do this in presentation (XSL FO layer).

The problem is, the images are chosen from a "library" of uploaded images, which are / can be used elsewhere. This is what happens when people have bright ideas near the end of a project ... grrr!

Thanks for all the suggestions - I'll see what I can do with ImageGen.

To determine the dimensions to resize the original image, if you have a targetWidth and targetHeight for the bourndaries of your box; then, calculate the ratio difference for each dimension, if you want to crop the image to fit perfectly, then you'll need to take the highest max ratio to use for the resize, then crop the remainder of the longest dimension, if you want the image to resize within the box, but have a bit of whitespace around it inside the box, then use the smallest Min ratio for the resize.

 var targetWidthRatio = (float)targetWidth / imageWidth;

                var targetHeightRatio = (float)targetHeight / imageHeight;

                var resizeRatio = Math.Max(targetWidthRatio, targetHeightRatio);

                calculatedWidth = (int)Math.Round(currentWidth * resizeRatio);

                calculatedHeight = (int)Math.Round(currentHeight * resizeRatio);

This will give you the width and height to resize the original image to, and it will fit the box but with overlap one dimension, to determine the point at which to crop, then I usually take the central portion of whichever dimension is too big to fit the box:

    int x = 0;

            int y = 0;

            if (calculatedWidth > targetWidth) {

                x = (calculatedWidth - targetWidth) / 2;

            }

            if (calculatedHeight > targetHeight){

                y = (calculatedHeight - targetHeight) / 2;

            }

Then I use the .net GDI classes to redraw the cropped portion of the resized image into a rectangle canvas of the same dimensions of the box.

Then wait for the content person uploading the image, to moan how the uploaded image has automatically cut of the head of the person in the photo, to which the only answer to that is ahh yes, that's art, it's all in the design, it's meant to be that way.

is working on a reply...