# Using images in the Data Viewer List

**URL:** <https://community.thunkable.com/t/using-images-in-the-data-viewer-list/576017>\
**Category:** Questions about Thunkable X\
**Tags:** data-viewer\
**Created:** [May 18, 2020, 5:45pm UTC](https://community.thunkable.com/t/using-images-in-the-data-viewer-list/576017 "2020-05-18T17:45:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\
**Post date:** [May 18, 2020, 5:45pm UTC](https://community.thunkable.com/t/using-images-in-the-data-viewer-list/576017/1 "2020-05-18T17:45:27Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\
**Post date:** [May 20, 2020, 12:17am UTC](https://community.thunkable.com/t/using-images-in-the-data-viewer-list/576017/2 "2020-05-20T00:17:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [May 20, 2020, 1:40am UTC](https://community.thunkable.com/t/using-images-in-the-data-viewer-list/576017/3 "2020-05-20T01:40:15Z")

</div>

> [@freddiedadog](#):
>
> e 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?

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

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

---

<div class="post-metadata">

**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\
**Post date:** [May 20, 2020, 3:09pm UTC](https://community.thunkable.com/t/using-images-in-the-data-viewer-list/576017/4 "2020-05-20T15:09:56Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [May 20, 2020, 6:01pm UTC](https://community.thunkable.com/t/using-images-in-the-data-viewer-list/576017/5 "2020-05-20T18:01:26Z")

</div>

see this example

> [@Custom Dataviewer and data sources (extended list viewer)](http://community.thunkable.com/t/custom-dataviewer-and-data-sources-extended-list-viewer/568413):
>
> I wanted to share this with those who want to use a data source not yet set up for the new dataviewer, like an API. this example uses my news API account (feel free to abuse it and get it shut down if you really desire) it imitates the cards created by the new dataviewer.let me know what you think. remix it up and come back to share! [https://thunk.app/w/-P6GK8VPv](https://thunk.app/w/-P6GK8VPv)[https://x.thunkable.com/copy/76e5b05a875febe850f44366434e959d](https://x.thunkable.com/copy/76e5b05a875febe850f44366434e959d) blocks used I just realiz…

you will set the background explicity through the design screen like tthis  
https://www.loom.com/embed/68cae9a5de614bfe8938f7fe9ff14b98

---

<div class="post-metadata">

**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\
**Post date:** [May 21, 2020, 3:47pm UTC](https://community.thunkable.com/t/using-images-in-the-data-viewer-list/576017/6 "2020-05-21T15:47:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fddog](https://avatars.discourse-cdn.com/v4/letter/f/aca169/32.png) [@fddog](https://community.thunkable.com/u/fddog)\
**Post date:** [June 17, 2020, 4:22am UTC](https://community.thunkable.com/t/using-images-in-the-data-viewer-list/576017/7 "2020-06-17T04:22:13Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 11:25am UTC](https://community.thunkable.com/t/using-images-in-the-data-viewer-list/576017/8 "2024-11-08T11:25:41Z")

</div>


