Using images in the Data Viewer List

Questions about Thunkable
1

Hi, I have a few questions regarding the use of images in the new data viewer list:

  1. Is there a way to have a data viewer list with only images and no title text? Ie. Not even have spaces for blank text, just a list of successive images.

  2. When I load png images with a transparent background, I’m seeing the system automatically fills in a grey background. How do I preserve the transparency?

  3. Is there a resize option for listviewer images? As of now, when I change the listviewer size there’s a danger the image gets cropped. But at the same time if I edit the image itself to be an absolute size, I’m afraid that it won’t preserve its look across different sized devices. How should I deal with this?

Thanks!

1 Like
2

Quick bump. Anyone have these same challenges or managed to solve them?

3

if what is available doesnt work, you could create your own custom listviewer. :slight_smile:

i have an example that i posted recently. also, my pngs stay with a clear background. you may need to set this explicitly for some reason

4

Thanks @jared.

Do you have a link to that example listviewer? I have no idea how to create a custom one, but will see if I can take some learnings from it.

And when you say I “may need to set this explicitly” for the clear background pngs… what setting am I looking to adjust?

5

see this example

you will set the background explicity through the design screen like tthis

6

Thanks @jared.

So, I’ve been looking at your custom listviewer and I think I get the concept - that essentially you’re creating an image with associated title, url etc and putting a button on top of it that’s clickable. And then cloning that for however many items you want in the list.
My question is then when coding with it, how to best specify what happens when the user makes a selection? Here’s the concern - The standard listviewer has an ‘item’ output that recognizes which item was clicked and it can be used in a function accordingly, so you have one block with “when ‘listviewer’ ‘item click’, do X”. Now if instead there are multiple items in a custom list and each one has its own button, does that mean you need many blocks - one for each item (button) to specify what happens when the user clicks that particular item (button)?

And for the image transparency question, I was actually referring to images used in the listviewer too =) Right now I have PNGs stored in cloudinary which have a transparent background. The data viewer list can extract them from their URLs, but then adds a standard grey background to each one. And since there’s no ‘background colour’ option for those images, I’m not sure how to specify the transparency.

7

Hey @jared. So, I’ve incorporated a simplified version of your listviewer (just images with no text) in my app, but I’m running into a problem. Wondering if you had any advice.

I populate the listviewer upon initialization, and the issue is half the time it loads perfectly and the other half of the time the images just don’t appear. If I then restart the app it’d work fine (or not). I can’t seem to find any pattern governing when it works and when it doesn’t.

Are there some areas I should look into in order to troubleshoot something like this?