Hello everyone, I’ve tried to do a Database of images and I would like to display that database into a Card view ColumnPannel with multiple cards in a single row of different images based on a query of the database. Something like, for example, the nft website OpenSea.
For that, I’ve tried to add a Card view ColumnPannel with a Repeating list inside linked to the database of images. In his item template, I tried to add multiple card views ColumnPannel with images inside, but the cards generated in each row showed the same image result. Because the id of the image of each card view is different. How could I fix this?
Welcome to the forum!
Without seeing a clone of the app, it’ll be hard for anyone to offer any advice. There are any number of places where what you’re trying to do could have gone wrong.
So this is the problem. I want each row have a different image based on the database. There is no more code than a button to search in the db:
self.repeating_panel_2.items = app_tables.arte.search()
But since each image of the item template has its own id, each row shows the same image. What i want is to display a different image on each row based on the database.
This is a image of the item template:
I have 3 card views with a image inside.
Without a clone link or some more details on the structure of your Data Table, it is quite hard to provide any sort of help
Ok sorry, this is the link of the app. You have to click on “BUSCA TODO”
And this is the Data Table
I feel like what you are trying to achieve could be done relatively easily with a flow panel and a card from.
Here is a link to an example app that has what you need. If you read through this you should have an idea of how it works.
The general code that makes it work is this:
search_results = app_tables.products.search()
for x in search_results:
self.flow_panel_1.add_component(ItemTemplateForm(item=x), width='30%')
Basically after you have searched your datatables, you can populate an ItemTemplateForm(or what ever form it is that has the card and image) and then add each new instance of the form to the flow panel.
Your app has three images per ItemTemplateForm so only the first one is being populated. Using only one image per ItemTemplateForm will have each one have a new image.
Also, you should probably send thumbnail versions of the images instead of the full size image to speed things up.
4 Likes
