Resize images to a friendlier web size when uploading 

Resize images to a friendlier web size when uploading 

  

Hi,

My requirement is follow:

When a user uploads an image to a project it keeps the size of the file that the user sent. Sometimes, most of the times, that size is too large and causes delay when opening the project.

The system should create 3 images based on the original: a thumbnail, normal and large.

Thumbnail
max-width: 100px;
max-height: 100px;

Normal
max-width: 250px;
max-height: 250px;

Large
max-width: 680px;
max-height: 680px;

On the project's show page, it should show the Normal version, if the user clicks on the image it should show the Large version.

How should I achieve this?

Please advice.

Thanks and Regards,

Suraj Borade

Solution

There is an extension called ImageEdit with Resize server-side logic.

For project's show page, you can use Lightbox Image built-in component.

Hope it helps.

Cheers...


Solution

Many thanks Harlin.

It is really really helpful.

Best Regards,

Suraj Borade

Hi Harlin

The ImageEdit extension is not in the forge. Would you be willing to share it ?


Regards

Bilal

Bilal Haniff wrote:

Hi Harlin

The ImageEdit extension is not in the forge. Would you be willing to share it ?


Regards

Bilal

I realize ImageEdit is an Integration Studio extension, not sure where I got it.

But you can use also Image Toolbox / Image Utilities as Justin suggested.


That worked for me.  Thanks for the reply

The ImageEdit extension is part of the Profile Utils component

https://www.outsystems.com/forge/component/651/profile-utils/

Something I have learned about this, is that resizing images in the DB is a mess.

What ends up happening is that you really MUST retain the original no matter what. Why? Because today you think that 200x200 is right, then tomorrow you want 300x300. So you either need to have the original or you need to try to upsize the things you downsized to 200x200, and that will look awful.

Then, a few months later, you will find a place where you want 100x100, or 200x150 cropped, or something like that.

To make it worse, now you have a problem where every deployment that has new image sizes need to either have a way to transform and store the images BEFORE the deployment where the new size is needed, be able to resize/store on the fly if needed, or put up with missing images until a post-deployment resize timer creates all of the images in the new size.

And what happens then? No you are storing many, many copies of the image in the database.

A year later, you try to understand why your DB is taking up 500 GB and your hosting provider wants to charge you a fortune for that space, and when you investigate you discover that 80% of your DB storage space is images.

No no no... there are much better alternatives!

* Store the images in S3 and pull them as-needed.

* Use a service like Cloudinary (which is a SUPER easy integration, and has a huge number of transformations you can apply with almost no effort) to host the images/do transformations/etc.

Bottom line: as soon as I hear "let's resize the images and put them in the DB" I promise that someone is making a mistake. Speaking as someone who has made this mistake myself, and regretted it.

J.Ja

For P10 mobile app, I gladly present my new Image Utils Mobile component in Forge:

https://www.outsystems.com/forge/2078/


Resize (while maintaining aspect ratio), Crop, and Identify width/height of image binary data.

All works client-side, before sending image to server...