Mini-Tutorial: Easily Resize Images with Cloudinary Media DB

Hi everyone :wave:

I shared this information in a comment lately, and I decided to make it easier to find by making a tutorial!

You may want to resize images in your apps for various reasons, including making your image fit a size limit set by an API you are using.

This is very easy to do with our Cloudinary Media DB component!

When you upload your image to the web using the Media DB component, you get a URL that points to the image in Cloudinary’s database.

Using this URL, you can resize your image using height, width and scale values.

You can read about resizing images in Cloudinary using URLs here .

As explained in this link, you only need to set one parameter, height or width, and the image will be scaled automatically. This would be best to make sure you don’t distort your image.

An example given in the docs linked above says that if you have a URL in the format
https://res.cloudinary.com/demo/image/upload/turtles.jpg

You can resize it to have a width of 200px, and scale its height automatically, simply by using this URL instead:
https://res.cloudinary.com/demo/image/upload/w_200,c_scale/turtles.jpg

As you can see from these URLs, the text image/upload/ in the original URL has w_200,c_scale/ appended to it. The easiest way to implement this change is to replace the text image/upload/ with image/upload/w_200,c_scale/ in your URL.

Therefore, you could use blocks like this to resize your image:

These blocks will work whether you build your app with the snap-to-position UI, where you need to add the Media DB in the Design tab, or if you build your app with the drag-and-drop UI, where you can find the upload image block in the Camera drawer of blocks.

If you are building your app with the DND UI: to see the advanced version of the upload image block seen in my screenshot, simply get the mini upload image block from the drawer, right-click it, and select Show advanced block.

If you are reading this and you wrote or saw another post in the Community that explained resizing images with Cloudinary URLs, let me know and I will link to the post here!

Happy Thunking!

6 Likes

gr8 tutorial

1 Like

Cheers, wish I had this last weekend, spent hour tearing my hair out!

1 Like