Mini-Tutorial: Easily Resize Images with Cloudinary Media DB

Tutorials and DIY Guides
1

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:

Screen Shot 2021-03-30 at 1.30.48 PM
Screen Shot 2021-03-30 at 1.30.48 PM1898Ă—296 36.7 KB

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!

8 Likes
2

gr8 tutorial

1 Like
3

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

1 Like
4

Where can I find the “upload image” block? I don’t see any MediaDB in my Thunkable blocks menus

1 Like
5

In DnD UI, use the Camera and Media drawer.

The default components are not easily noticeable.
Use one of these first
image

Then use this one
image

So, lets assume I want to choose an image from the photo library and upload it to Cloudinary.

  • I will use the block that says image from photo library and place it in any empty space in the screen and right click on it.
  • image
  • From the menu choose Show advanced block
  • The component will change to this
  • image

Now, do the same with the component url from uploaded file which should change to this
image

Hope that makes it clear.

[Update]
Now Thunkable has a resize block and you do not need to upload the file to Cloudinary to resize it.

6

I work with the snap-to-position UI, a mediaURL was generated by a Media_DB block, how do I edit a mediaURL to be the format as yours before do an upload?

Thunkable
Thunkable1059Ă—510 91.8 KB

7

What is the actual mediaURL text value you are working with? And have you tried the blocks @jane posted above?

8

I didn’t try the blocks above because my work isn’t in DNB UI. I want to resize a photo before upload to Cloudinary, however I found that this method still upload the full size photo. So, I am looking for others way.

9

The screenshot you posted is from the Snap to Place (StP) interface. The screenshot @jane posted has a set app variable main_URL to set of blocks that you can use in either interface to download a resized image from Cloudinary. If you want to upload an initial smaller image to Cloudinary, it’s not possible with the StP.

Please see my last comment on this feature request and consider adding your own comment.

I know the Thunkable team is working hard to make the Drag & Drop (DnD) interface the main interface for Thunkable but it’s still not there yet and we users have to make do with a lack of features that we had in the StP interface. So even though the plan is to transition to DnD fully, many of us are using StP. I hope that the more people who request image resizing in StP, the more likely it becomes added as a feature. Because the current method of uploading photos from a phone takes way too long and with newer iPhones (my iPhone 11 is not that new), it sometimes won’t even upload because the image sizes are too large.

2 Likes
11

Thank you so much for your comment, @tatiang. The resize feature you mentioned is exactly what I’m looking for. Many users, including myself, are looking forward to this feature. I hope the Thunkable team releases it soon.

12

You’re welcome. I think that the more they hear from us on GitHub, the more likely it is that new features get added to Thunkable. They can’t see every post on the forums but GitHub allows them to track comments and tag topics. For example, that specific topic is tagged as “planned work” but it doesn’t say when it will be added.

Edit: just re-read that topic and Thunkable Staff said there are no plans to add this to StP. So I guess we’re out of luck!

2 Likes
13

I think this is similar,it’s based on same topic

14

Please don’t link to topics that are several years old.

1 Like