Images shown based on user input

Anvil Q&A
1

Hi Guys,
I am attempting to make a little webapp to draw a certain number of cards based on a user input.
If a user enters 3 I want 3 random cards to be drawn, etc . the cards will all be the same image, however I want to put a few text fields of info on top of them.
Eventually I will have a db attached the user can store card info in that will fill them.

This would be relatively trivial in an IDE like Xcode, but I wanted to make it a bit more accessible , hence anvil. I have mucked around with ways to do it and thought maybe a container using Cols, but i am not sure how to implement that in Anvil

2

Hi @troy.villani and welcome to the forum!

Here’s a very simple example app which shows one way to do this with Anvil. Hopefully it will work as a starting point for you :slight_smile:

https://anvil.works/build#clone:KR5CEMXRI764HEPA=F45XMYSHU2UNB5BPFLJK3ERX

1 Like
3

Thanks Bridget! Thats perfect!
Just quickly, is it possible to set an image as the background of the “card” I have had a play and i can set colours or add an image like you have , but i wanted to use a default background and then overlay text boxes

4

Hi Troy,

You can set a background image for the card role (or create your own role) in the app’s theme.css file. I added the following two lines to .anvil-role-card in Bridget’s example app to give the cards a background:
background-image: url(_/theme/anvil.png); height: 300px;.
I’ve fixed the height here since removing the image component means the card is only as big as the TextBox.

2 Likes
5

Thanks!! thats great! its quite a change going from app dev in 1 language to webapp dev , but Anvil seems like a great platform!