Thursday 2 September 2010

Resizing images on N2

One of the main issues you have with CMS systems is clients uploading images. Usually they take some pictures on their cameras and just want to upload the images without having to edit it in Photoshop or some other editing software.

The parameters

The parameters are pretty self explanatory, but let's run through them to make sure.Remember these are all done via the querystring e.g image.ashx?img=picture.jpg&w=100&h=75

  • img - this is the url of your image and can be a url from anywhere on the site
  • w - this is the width of the image.
  • h - This is the height of the image. 
You can pass in the width, height or both parameters. If you only specified either the width or the height though then the handler will automatically resize your image to the correct proportions.

Note if you're using an N2 image property that you may need to remove the ~ at the start of the url. Also, you will need to URLEncode this so that spaces etc are handled correctly. If you don't see the image appearing on your page or it appears as a broken link, it's most likely to be because the handler cannot load the image.

I have found this really helpful when automatically resizing an image depending on where it is dropped on a page. For example, if we had a standard two-column page with a small left hand column and a wider main column on the right, we'd want to size the image so that it wasn't too big - or small - for the column.

If we had a "Photograph" part, you could check which parent Zone it was in and then pass in different values to the image.ashx handler!

No comments:

Post a Comment