Hi,
I am creating a Gallery in my app, so the user can set the Background Picture of the main screen, but the images in gallery load very slow:
The direct link of the images pointing to a Dropbox file are stored in Google Sheets. I have resized the images already to have a smaller size like 6 KB, so the files load faster, but it isn’t enough.
Do you have any idea to speed up this process?
If the images don’t change, put them directly in the app.
If the urls don’t change, put them in the local DB instead of Google sheets.
If you need to load from the internet (because things change), post your blocks and maybe we can find a way to speed up.
Hi @catsarisky,
Thank you for the answer!
Well, I would like to change the images after the app is released as well. For example on Christmas I would like to update my gallery with Christmas themed backgrounds for everybody, because of that I am using Google Sheets.
The sheet looks like:
And the blocks:
Alternatively, a solution could be that the loading screen hides if all of the images are displayed. (If I make a wait block to the end of this block, it doesn’t do that.)
Hi again @skulamester ,
The first thing that came to my mind that could speed up the process is that you could use local db, for example, you use your google sheets, then get sort of download all the links(copy them) into the local db. I was also of data viewer grid, because that is reasonably fast but i am not sure if you could use that sort of pattern, although there is custom data viewer layout but i am not familiar with that.
Hi,
That is a valid idea although as far as I know the Local DB stores only the link to the image, so it doesn’t really help me speeding up the things.
Further, I would like to avoid using Custom Data Viewer, as it doesn’t support horizontal scrolling, that’s why I am cloning a Row.
You’re connecting to your Google Sheet every time you display an image. So if you have 30 images, that’s 30 separate connections. You need to avoid that.
Also, I’m doing something similar in my Photo Journal app. One way I speed things up is by hiding and showing components instead of cloning and removing them. If it makes sense to do it that way, you can create all of the components manually in the screen and then just hide the ones that would be blank (that are beyond the index of the gallery length). That may speed things up, too. It’s a major change to your project so I would only undertake it after you’ve eliminated other things that might be slowing it down.
I use the “seconds since 1970” block in the Device drawer to time how long certain parts of my project take to run. See this post:
You can “bookend” sections of your blocks and then make minor changes (e.g. remove a block) to see how it affects the timing.
I was trying to use Images instead of Buttons in the Gallery.
On the one hand it seems to be a solution, as it caches the images and they load faster next time the user opens the screen.
On the other hand, I am unable to clone an Image with a border. After cloning the Image has 0px border, which leads to an ugly design.
Anyone else facing the same problem?
See my sample project: Thunkable
In your sample project, the image has no border. I added a 4-pixel border and it does clone the border but the preview is a bit off:
It does look correct if I use a button instead of an image:
So that’s an interesting bug. When I remove the “when image 1 click” block, everything looks great. When it’s present, the image becomes square (corners not rounded) and sits on top of the curved border.
I think @tatiang’s suggestion to switch to a button is a good one, if there aren’t other functions you need that require it to be an image. Another option would be to keep it as an image but to overlay a transparent square on top of it, and respond to clicks on THAT. If you want help setting that up, let me know.
Do you want to file a bug report on GitHub? This is certainly a bug.
I’m not seeing this - when I clone an image with a border, the border still shows up. I /do/ see problems with border parameter not copying over when I use the duplicate button in designer, but not here.
There seems to be a problem with image positioning. I replaced the Dropbox image with one from my computer and I see this with Picture Resize Mode set to “contain” (the orange background is a background color I selected):
But when previewing it, the picture goes beyond the border of the component:
And here’s the same image with a red border set to no radius (zero) and Picture Resize Mode set to “cover”:
I enlarged the image to 250 x 250.
I use buttons in my project, but buttons don’t cache the Background Pictures, so they load not so fast. Because of that I was trying to use images instead of buttons.
That would be awesome. I am looking forward to your help.
Well, I will certainly do that tomorrow.
Here’s my structure - the landmark is an image, and “blocker_label” is a label that’s sometimes transparent. I clone the whole column when I clone.
Here’s the column:
Blocker_label has absolute height and width that match the image (landmark) underneath.
Notice Blocker_label’s advanced settings are set to absolute:
and Z-index puts it on top of the landmark image:
Set it to transparent (regular settings) if you want to see through it.
Landmark has absolute sizing that matches the sizing of blocker_label. I actually set both with blocks.
Then you need a block for when the label is clicked. (Add your own logic - mine probably doesn’t suit.)
I have some problem with the background picture as well, there is a space on the right, if I set the width property of a container:
See my project: Thunkable
This is intriguing. How did you figure that out? I may have to switch the buttons in my Photo Journal app to images.
Well, there is an option for that in the Advanced tab:
I saw those… I wasn’t sure what they do. No documentation on them so I was going to ask @jane if she could explain. 
I am wondering too.
But note, cloning images with borders don’t work. 
