# Is there a way to have the data viewer grid show both images and videos?

**URL:** <https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288>\
**Category:** Questions about Thunkable X\
**Created:** [April 17, 2023, 3:19pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288 "2023-04-17T15:19:08Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ks5548i](https://avatars.discourse-cdn.com/v4/letter/k/13edae/32.png) [@ks5548i](https://community.thunkable.com/u/ks5548i)\
**Post date:** [April 17, 2023, 3:19pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/1 "2023-04-17T15:19:08Z")

</div>

Hey everyone! I am using cloudinary to store user uploaded images and videos onto a spreadsheet via url, and then using thunkable to allow users to filter and view whatever they want (images and videos) based on their preferences. My problem is that the data viewer grid only allows me to display images. I’ve tried to make a custom data viewer grid that would show both videos and images, but it seems like I can only make one custom grid for image, and another separate one for videos (So I would have two data viewer grids on one screen, but idk how that would look) is it possible to merge both data types onto one data viewer grid? thank you!

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 17, 2023, 3:23pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/2 "2023-04-17T15:23:10Z")

</div>

To do this, you would need to create a layout and use clone blocks to duplicate the layout instead of a Data Viewer.

---

<div class="post-metadata">

**Author:** ![ks5548i](https://avatars.discourse-cdn.com/v4/letter/k/13edae/32.png) [@ks5548i](https://community.thunkable.com/u/ks5548i)\
**Post date:** [April 17, 2023, 3:31pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/3 "2023-04-17T15:31:33Z")

</div>

Sorry, not sure if I understand what you’re saying. When I try to create the custom layout, it only lets me use one source (image/video) to display, not both.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 17, 2023, 3:47pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/4 "2023-04-17T15:47:06Z")

</div>

Right, so you would need to abandon data viewers and layouts as you’re used to. Cloning means that you manually set up components (groups, rows/columns if using Snap to Place or the beta Layouts in Drag & Drop) and then use cloning blocks to create multiple versions of that set of components.

You can literally make any combination of components that you like. You’re not limited to the data viewer grid constraints.

You can Google _clone Thunkable_ or _clone Thunkable DVL_ to get started.

---

<div class="post-metadata">

**Author:** ![ozel1978](https://avatars.discourse-cdn.com/v4/letter/o/3ec8ea/32.png) [@ozel1978](https://community.thunkable.com/u/ozel1978)\
**Post date:** [April 17, 2023, 4:22pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/5 "2023-04-17T16:22:25Z")

</div>

you design whatever component you want then save as data viewer layout.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/7/b70274cce7ae3ba8f695cda57a3d8bf07dab105b.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 17, 2023, 6:04pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/6 "2023-04-17T18:04:22Z")

</div>

Another option is to stick with a DVG and create a custom layout that has an image and a video and just hide one or the other based on some condition.

Can you post a sketch or screenshot of what you’re wanting this to look like?

---

<div class="post-metadata">

**Author:** ![ks5548i](https://avatars.discourse-cdn.com/v4/letter/k/13edae/32.png) [@ks5548i](https://community.thunkable.com/u/ks5548i)\
**Post date:** [April 17, 2023, 8:22pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/7 "2023-04-17T20:22:44Z")

</div>

Hi! So I’d actually want to display both videos and pictures at the same time, not one or the other. I’d like it to have a similar layout to TikTok where one data source (either a picture or video- which ever comes up first from the spreadsheet that is linked) takes up most of the screen (as well as see the caption and username of the user who posted the pic/vid), and then the user can just scroll down like TikTok to see more.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 17, 2023, 8:56pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/8 "2023-04-17T20:56:33Z")

</div>

Okay, have you tried making a custom Data Viewer Grid layout that includes an image and a video?

You said you had… you can put any components you want into a custom layout. There aren’t really limitations except for screen size. Where did you get stuck?

---

<div class="post-metadata">

**Author:** ![ks5548i](https://avatars.discourse-cdn.com/v4/letter/k/13edae/32.png) [@ks5548i](https://community.thunkable.com/u/ks5548i)\
**Post date:** [April 17, 2023, 9:45pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/9 "2023-04-17T21:45:38Z")

</div>

Yep I actually created a custom that includes both data sources. only problem is finding a way to make them big enough (idk what the actual layout will look like bc I haven’t tested it out yet, still fixing some bugs within my code to show the actual data)

---

<div class="post-metadata">

**Author:** ![Carlos\_Bieberach](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@Carlos\_Bieberach](https://community.thunkable.com/u/Carlos_Bieberach)\
**Post date:** [May 25, 2023, 4:09pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/10 "2023-05-25T16:09:09Z")

</div>

When i clone DVG it shows one placeholder per record, that tells me the connection is working (using Local Table) but it does nor show the actual image. If I do not clone, the it shows the correct amount of placeholders and its corresponding image.

What could the problem be ?

Thanks in advance !!

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 25, 2023, 4:39pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/11 "2023-05-25T16:39:40Z")

</div>

How can I know without seeing your blocks or a link to your project?

Why are you cloning a DVG? A DVG is made for showing multiple rows of information already.

---

<div class="post-metadata">

**Author:** ![Carlos\_Bieberach](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@Carlos\_Bieberach](https://community.thunkable.com/u/Carlos_Bieberach)\
**Post date:** [May 25, 2023, 9:40pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/12 "2023-05-25T21:40:56Z")

</div>

Thank you Tatiang for your prompt response.

Sorry I didn’t upload a snapshot. This is a single block call:

One cloned DGV. Connects correctly because I see all 11 place holders but they contain no images.

The original DGV shows the same 11 place holders with their corresponding images.

I have to use clone because this is a very dynamic report with 12 sections. Each section has its own amount of photos and not al users have access to al sections.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 25, 2023, 10:27pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/13 "2023-05-25T22:27:38Z")

</div>

It’s interesting to think of cloning a DVG. The original DVG is synced to a specific data source and may have mapped components. It sounds like your cloned DVG is not synced to a data source. I’m not sure you can do anything about that.

The question is really: is the intended behavior of a cloned DVG that it should be synced to the same data source as the source DVG. I would certainly think so!

---

<div class="post-metadata">

**Author:** ![Carlos\_Bieberach](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@Carlos\_Bieberach](https://community.thunkable.com/u/Carlos_Bieberach)\
**Post date:** [May 25, 2023, 10:41pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/14 "2023-05-25T22:41:17Z")

</div>

funny thing is that it creates one placeholder for each photo in the Table, so it connects, but it doesn’t display the images inside each place holder.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 26, 2023, 12:11am UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/15 "2023-05-26T00:11:28Z")

</div>

Then it’s synced but not mapped.

Have you tried manually setting the images’ URLs using blocks after the cloning is finished?

---

<div class="post-metadata">

**Author:** ![Carlos\_Bieberach](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@Carlos\_Bieberach](https://community.thunkable.com/u/Carlos_Bieberach)\
**Post date:** [May 26, 2023, 12:31am UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/16 "2023-05-26T00:31:21Z")

</div>

Yes, but in the “any compnent” block after selecting DGV the few properties are for height, width, etc and nothing about mapping nor data.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 26, 2023, 12:55am UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/17 "2023-05-26T00:55:38Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/0/f0378aa56d93a364271a118d24341ee4cc19403e.png)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/5/256bf7a022f834fe7aabab13c03fd65b19645f30.png)

---

<div class="post-metadata">

**Author:** ![Carlos\_Bieberach](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@Carlos\_Bieberach](https://community.thunkable.com/u/Carlos_Bieberach)\
**Post date:** [May 27, 2023, 3:50pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/18 "2023-05-27T15:50:34Z")

</div>

Thank you again but it doesn’t work with a “cloned DVG” simply because the dropdown options to set propertied does not include “image”. In a cloned DVG i can set height, width, visible, x , y, Horizontal scroll and empty text but not image.

I think I will create a separate page for for DVG and drop the cloned DVG. User will navigate there on click from the main page using your approach where in the loop i can filter what photos to show based on customer, report and report section.

Thanks. Will post my results shortly.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 27, 2023, 5:05pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/19 "2023-05-27T17:05:22Z")

</div>

Sorry, you’re right but I think you can still do it. I can share blocks later (I’m on my phone) but you can replace the j block with a list block that takes an item from the All Data Grids block in the Any Component drawer.

You can see an example here (for cloned labels): [Cloning components to create "DVL" style lists - #4 by tatiang](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/4)

**Edit:** or maybe not! I don’t see a way to get the row ID of the newly-cloned DVG so I think without that, you’re stuck.

---

<div class="post-metadata">

**Author:** ![Carlos\_Bieberach](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@Carlos\_Bieberach](https://community.thunkable.com/u/Carlos_Bieberach)\
**Post date:** [May 30, 2023, 3:37pm UTC](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288/20 "2023-05-30T15:37:10Z")

</div>

I will try this today:

Create Temp Table with same format as Table Photos. If I had to do static DVG, there will be some 24 in a single page. This is a Home Inspection App with 12 inspections each needs 2 photo sections. So, since user can only see one Photo Section at a time, i will clear Temp Table, run my query and filter photos by User, Report ID and Section ID and add the recordset to Temp Table and invoke DVG.

Nothing more dynamic than this design lol

Will post results later today/tomorrow.

Carlos

[Next page](https://community.thunkable.com/t/is-there-a-way-to-have-the-data-viewer-grid-show-both-images-and-videos/2376288.md?page=2)
