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!
To do this, you would need to create a layout and use clone blocks to duplicate the layout instead of a Data Viewer.
1 Like
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.
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.
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?
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.
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?
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)
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 !!
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.
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.
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!
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.
Then it’s synced but not mapped.
Have you tried manually setting the images’ URLs using blocks after the cloning is finished?
Yes, but in the “any compnent” block after selecting DGV the few properties are for height, width, etc and nothing about mapping nor data.
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.
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
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.
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