Automatic image resizing and questions

Hello,
After searching the forum, I couldn’t find the exact answer to 3 questions regarding images.
1- a large number of users (potentially more than 2000) will be able to add photos to their profile using a form. According to my research, the images will be automatically reduced and converted by Adalo, but all these images won’t such cause the application to slow down badly? Is there a maximum?

2- Is it possible for a visitor to the application to click on an image in order to enlarge it or to be able to zoom in on it?

3- the ideal format is portrait but if a user adds an image in landscape format and I have selected “don’t crop” this one is fully displayed but there is a large vice space.
Even for portrait images it’s not always very well calibrated (depending on the shape and size I gave to the image

thank you in advance for your feedback

Hi Juano,

My quick 2 cents:

  1. I don’t believe having many images in your database will slow down the app. However, showing many images at a time will slow down the app.

  2. To ‘zoom in’ on the image you can make the image a button that then opens a new page or pop up that is a larger version of the image

  3. Same as above. You can have the thumbnail do cropped to now have empty space, then click the image and in a pop up see the image in better quality

hello barrett,

Thank you for your answer.

Opening a new page does not really change the problem because the image is almost the same size.
Another problem, if the image is in landscape format, it will remain small (even if the person rotates with their phone) because the format will be defined initially as being a portrait form

it would be better to be able to click on it and have it open as a pop-up then to be able to zoom in on it and return to the screen by clicking outside the image.

I’m interested in other opinions on the first question :smiley:

Like @barrettnash said, simply having the images in the database will not slow down the app. Loading a huge list of records with images can slow down the app.

Since Adalo uses IMGIX for compression and rendering, you can add query parameters to the image URL for speed if you use “URL” as the image option. For example, You can set an image to URL containing the image URL as magic text, followed by &auto=compress&w=200&h=100 (switch the w to the width of the image and the h to the height. You can also use face detection or entropy to create a focal point. Here is more info: https://docs.imgix.com/apis/rendering

Here’s an example:

This URL and the parameters in this screenshot force the image to zoom in on the user’s face and compresses the image to the proper dimensions.

Yes. You can add an action to the image to link to a new “blank” screen. Add the image to the screen and set an action on the image when clicked to go back.

It may be possible but I have not tried it. Here’s the idea: You can add 2 additional screens. One for landscape-orientation images, one for portrait-orientation images. You’ll need a way to identify the dimensions of the image to compare if the height is larger or the width is larger. There’s probably an API for that. If you can identify the orientation of an image, you can send them to a specific screen to display the correct format.

Ok thanks.
But i don’t use the URL. My image is in the database :frowning:

I created a new screen to enlarge the image but the image is not much larger. We would have to see if it is possible to zoom in on it (by making the gesture with the fingers on the screen) but to test this the application must be published…

Juano, you can select the URL as the Image Source and then you can access the URL of the image property!

You need to stretch the image a bit out of the screen to apply it for the full screen. I guess this is a bug or this is how Adalo apply this because happening with web-view,map components too! :joy: Or I think you can do something like this instead of stretching the image out of the screen.

I’m not sure if this is possible with the Image component but for this there are some components you can use.

First one is the one tghat Pragmaflow built!

image

Pragmaflow Website

https://adalo.pragmaflowservers.com/install-component

Instructions to download Pragmaflow Components

https://www.youtube.com/watch?v=4mo_u5EdEWw

The second one is that Simon Siegert developer built and published on the Components Marketplace!

image

Thank you

Thank you very much Dilon!
You are too strong :smiley:
I will try all this, especially when I upgrade to the pro version!
Because not possible on the free version

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.