Help speeding up my Gallery

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:

1 Like

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.

1 Like

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.

1 Like

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:

1 Like

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.

1 Like

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.
image

Here’s the column:
image
Blocker_label has absolute height and width that match the image (landmark) underneath.
Notice Blocker_label’s advanced settings are set to absolute:
image
and Z-index puts it on top of the landmark image:
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.)
image

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.

2 Likes

Well, there is an option for that in the Advanced tab:
image

2 Likes

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. :slight_smile:

3 Likes

I am wondering too.

But note, cloning images with borders don’t work. :rofl:

1 Like

I haven’t yet seen evidence of this - do you have a simple example that reproduces it? I see that image borders are bugged when the image is clickable, but that has nothing to do with cloning.

1 Like

You set your width to 95%, so of course there’s space on the right - that’s the other 5% of the screen. :slight_smile:

You are right. Cloning does work, but the borders are bugged. Sorry.

There shouldn’t be a space, as I have a background picture set for the row. Here is the preview it does display good, but on my iPhone it doesn’t:

See my project above.

If I set the width of the row for 70%, I get this on my iPhone:

Right here - you have the width of the row set to 95%, which means you’re going to have a stripe on the side next to the row. Oh… are you saying it isn’t filling the 95% wide row? Whats your background picture resize mode set to? Set to cover.

1 Like

I found some info about cache settings:

1 Like

I have already tried that before, but it does that weird thing:


Btw, showing me this setting was absolutely helpful in my project, thanks!

2 Likes

In your screen shot, you’re showing it set to contain.

Is the red from the row, or does the container holding that row also have a red background?