How to resize images automatically in a web app?

I have built a web app that allows people to upload an image, and this image will b开发者_开发问答e displayed on the web app list. I need to have the image automatically resized to something more suitable like a thumbnail.

---

Adobe Business Catalyst will interpret certain parameters on the src URL of an img tag as an instruction to re-size the image before sending it to the client. Those parameters are:

• Action=thumbnail
• Width (integer)
• Height (integer)
• algorithm ( proportional | fill | fill_proportional | proportional_noupscale )
  • proportional preserves aspect ratio, and will up-scale smaller images. This is the default.
  • fill squashes images to fit, and will up-scale smaller images.
  • fill_proportional reduces the images by the least necessary to get just one axis inside the given dimensions; any extra pixels on the other axis are symmetrically cropped. It does not up-scale smaller images.
  • proportional_noupscale always returns an image in the same aspect ratio as the original, inserts padding rather than upscaling, and will always fit completely inside the specified dimensions - extra padding is cropped off to maintain the aspect ratio.
• Format ( png | jpg | gif )
  • This parameter determines the image type returned after re-scaling.

Example: <img src="{tag_yourImageFieldName_value}?Action=thumbnail&Width=320&Height=100&algorithm=fill">

This will insert the image from the yourImageFieldName field in the web app, and squash it to fit 320 pixels wide by 100 high. Appending _value to the tag forces BC to return just the URL, without any extra markup.

Reference: Programmatically creating thumbnails from full size images

---

I managed to do it using a small Javascript and Jquery

$('.div img').attr('src', function() {
    return  this.src + '?Action=thumbnail&Width=675&Height=503';
});//resizing images

Hope this helps.. Did for me!

---

You'll want to put the image tag into another element, like {tag_image}

Then you can set '.image img { max-width: 100% }' in your stylesheet so the image will never exceed the width of its container, and set a width on the image div to decide how big it will be.

---

I know this is an old post but I just want to help those who still don't have any idea. In your web app field that has an 'image' type, simply append the width and height to the image path.

Like this: /path/to/my/image.jpg,370,170

Source: http://iamtheshadowonthesun.blogspot.com/2013/09/adobe-business-catalyst-how-to-specify.html