How to manipulate images in Adalo with ImgIX

Hi there,

Some video how to use ImgIX API to manipulate images in Adalo. You can adjust a lot of parameters for the images: quality, size, blur, orientation, … - almost everything which ImgIX allows!

I can’t say this is an “official” method to manipulate images, though according to my knowledge ImgIX is the only CDN used for images in Adalo. Enjoy!

Best,
Victor

9 Likes

Hi @Victor,
Quite interesting since I made tests with AWSs3 being served via Imagekit (I will make a video soon).

When using Geolocation it gives me the Adalo server location in US; so I assume using Adalo’s Platform, my ImageKit CDN will still serve the Image to US while then Adalo showing in Frontend to someone in Asia/Europe and so on. Wondering if they will fix this once geolocation is also available.

1 Like

Hi @JL_LJ,

Please share the video reg. AWS S3 + ImageKit, that will be useful!

Best,
Victor

Thank you @Victor for this info, again. :pray:
I was trying to apply it in order to download QR Codes (How to download (save local) QR code generated image?) but &dl function does not interpret the QR URL as an image.
Do you have any idea of a another workaround that may allow to download the QR?
Thank you!

@Victor would this work to be able to resize the image so that there’s no need for crop?

Hi @jencass97,

Based on what I see here: Size | imgix Documentation, it should be possible.
Keep in mind thought that this will not affect original image stored in Adalo; it will only affect the image displayed in the app.

Best regards, Victor.

Hi @ionutilie,

I’ve answered in that topic.

Best,
Victor

hi @Victor
I used to use a custom action to upload an image from the image picker to cloudinary, get the URL of that image and display the image, but suddenly it’s no longer available.

Is it because cloudinary can’t access ImgIX?
Can’t I use the cloudinary API as before?

I’m sure some of you will be asked the same question, so I would appreciate it if you could answer.

1 Like

Hello @yyamasita,

I don’t see how Cloudinary and ImgIX could be related. This tutorial describes how to work with ImgIX API, when images are stored in Adalo’s database.

Best regards, Victor.

1 Like

Hi @Victor, thanks for your wonderful tutorials.

I am using the parameters px to pixelised my images. I used custom formula to generate the value. But during like 1 seconds, we can see the image clearly. It is look like it “process” or “load” the transformation.

Do you know how to “preload” image with transformation or juste may be hiding it for 1 or 2 seconds to wait processing ?

Many thanks for your help, I am stuck with this issue for 2 weeks now :sob:

1 Like

Hi @Ithy,

How do you load the images and how did you set up your Image component? I can’t reproduce this in my sample app.

Best,
Victor.

Hello @Victor,

I upload the image with the classic component image upload from Adalo.

I discover that the url (use the URL properties by default) comes from IMGX services. And with this service, you can add parameters to the URL to process the image.

You can check it on Rendering API | imgix Documentation.

Hi @Ithy,

Yes, I’ve seen this documentation and I’ve created the video (seen on the top of this thread) based on it :wink:

What exactly do you have in your image component - could you please share the screenshot how you create the URL there.

Best,
Victor.

Hi @Victor , thanks for this video.

I am actually trying to create a Maintenance App for my project. I listed all the logs including it’s thumbnail photos, so when they tap on the photo, it will go to a deck viewer. But it the deck photo viewer will load after 5 seconds. Can we manipulate the photo inside of the list to lower resolution so it will load faster?

Please see screenshot. Thanks! Cheers!

Hi @vanderbritz,

You can try to load photo via URL, if that’s supported by deck viewer.

Best,
Victor.

1 Like