Forum Academy Marketplace Showcase Pricing Features

[Solved]How to show an image chosen from the dropdown?

How can you show the image of a vehicle chosen by the dropdown menu?

On the right below screen, I want to show the image of a vehicle as soon as the dropdown choice is made by the user.

I tried using the Dynamic image, but cannot make it work.
I’m very new to bubble and this kind of visual programming and dying to get some help anyone who has more knowledge.

Thank you so much for your help in advance!!

Hello, try making each car a different / new entry in the vehicle type table instead making each car picture a field. So each car type entry will have an unique id containing the fields car type (make/model name) and an associated picture.

Doing it so, you will be able to search the car from the dropdown.

(Pardon my English, I’m a Spanish native speaker)

On the other hand, the dropdown should be populated dynamically using the vehicle type table as source, so when you pick the option, the DB will be able to know which unique id to select and therefore show the appropriate image

Hi diego Thank you so much for your help !

But I still don’t understand what you are saying. Could you please elaborate a little more?

So sorry.
It’s not your English, but my brain that’s not working well.

Thanks ~

Being a newbie in Bubble can damage our brains a little bit as we don’t understand the database structure at the beggining and there’s no tutorial to make it simple to non coders like us:

You have a Data Type called Vehicle Type

So, if you click on the App Data tab, you should see a list of vehicles meaning a different row for each car, not a single row (entry) for all cars

To change this, eliminate all fields in this Data Type and create the following new fields:

  1. Vehicle Type - Text : Here you will include for each row a single make (i.e. Hyundai Sonata)
  2. Vehicle Pic - Image : Here you will include the associated make picture (i.e. The actual pic of the Hyundai Sonata)

The system automatically creates an additional field for this entry (Unique id) which is a unique/long serial number that identifies only the Hyundai Sonata mix of name and picture.

Then, you can go on creating new rows (entries) for each Car’s make/model + Picture by clicking the New Entry button on the App Data tab.

Voilà you have a list of cars and their pictures

2 Likes

For the second step, you will not include the cars in the dropdown by writing them down, you will create the dropdown dynamically asking the dropdown to collect the list of Vehicle Types (Data Type)

And choosing the field including the car name to be shown in each dropdown options (a.k.a. captions)

To show the picture of the car, you will create an image which it’s content is dynamically selected from the current dropdown menu selection’s and sourcing from the vehicle type (Data Type) image field.

Right now I’m on my cell phone, so just give me a couple mins to help you out in the App

Wow Diego my Friend~!!

Thank you so much Bro~

I made it work now~!
not 100% but almost there ^^

Really appreciate your great support ~

3 Likes

Nice! I broke my mind for a couple weeks trying to understand, now being able to help is a great step for me.

Additional tips:

  1. Check the tweet example app to understand when/how to use Data Types as entries of a field in a different Data Type in order to create relationships between types (this will be KEY to be able to create working apps).

i.e. You have a field in the Pass New Trip Data Type named Vehicle which is a Text (field type), If you are thinking to populate this field from the vehicle selection in the dropdown, then you might reconsider to delete this field and create it again but selecting “Vehicle Type” instead of “Text” as field type. So it will include the car from the Vehicle Type Table.

  1. Using number as a field type: Please consider this: Don’t use number if you are not thinking to use this field entry to calculate things.

i.e. Phone number should be a Text field type as you are not going to make calculations with a phone number.

If you want to make sure only numbers are included for the phone field, then select text for this field (and better use text-numbers only in the input field if customer/user is to fill this information).

Hard to explain right now but trust me, it will bring some problems later if you keep it this way.

Number of passengers can work the same way (use text) if you are not planning to calculate something out of this field (fare split for example).

1 Like

Geat! Excellent~!

I literally been thinking 4 hours to figure this out!

You are truly my hero of the day!

muchas gracias!! ^^

2 Likes

You are welcome!!!

Great to help (as told before I was stuck for a couple weeks not being able to understand database structure and relationships).

Maybe Emmanuel and his team should make a little database structure 101/made easy for non coders like us.

Still, Bubble is a great app once you get it right!!! Kudos for the Bubble team (you are changing my life!!!)

Let me see the app once you’re done (We get to discover new things or understand better by watching other users apps and their mental processes/approaches).

1 Like

Have you read our blog posts at bubble.is/apps example apps? They cover stuff like that a little bit.

1 Like

Thanks for jumping in, Emmanuel. For newbies it might be a little bit difficult to find the right information without spending some hours to land in the right spot/source.

I finallly understood when watching carefully the Twitter example. Think about people that has never seen/“exposed to” a database before… It seems rocket science, until you realise how simple it has been made by the Bubble Team.

The thing for me was not being able to tell the difference between Data Types, fields, field types as the tutorials just ask you to create things but not explain the rationale behind in a way that a newbie will easily undestand.

The Twitter explanation made it a lot easier for me but still some additional brain effort was required to complete the puzzle.

I would love to help out creating such tutorial if it helps somehow the community.

1 Like

Well we have a video called ‘Defining types of things’, but it’s a bit old. Did you watch it though.

If you feel like putting something together, a blog post, or a video, we’d love to see it. New users with a fresh eye on things are usually the best at explaining things in a clear way!

1 Like

I’ll see the video and let you know (as I am almost sure I have not done it already), maybe it is the missing link here.

Nevertheless, I’ll find some time to work during the weekend on a post:

- Bubble Database for newbies: Written by a newbie and curated by experts!

3 Likes

Thank you Diego and Emmanuel for a kind help.
I now have a bit more confidence in bubble and will try harder today. ^^

Sure Diego, I will show you my app once it’s done.
Bet I’ll be needing more guidance from you in coming days.

Thank you so much guys~!

1 Like

Diego,

Sorry to disturb you again, but I cannot find the Tweet example app on the bubble.is
Could you please let me know where it is?

Cheers!

Hello,

View: https://microbloggingapp.bubbleapps.io/?debug_mode=true
Edit: https://bubble.io/page?type=page&name=index&id=microbloggingapp&tab=tabs-1
Blog entry: https://blog.bubble.is/how-i-cloned-twitter-without-any-code-5585159d9f3a

It is the last in the Example Apps tab in the Apps Gallery page: https://bubble.io/apps (must click in example apps tab as long as the page will load in the User apps tab)

Sorry for late response (been away).

I’m actually in the process of putting together a comprehensive guide to Bubble fundamentals precisely for this reason. I’ll post in the forum when it’s ready to go live.

3 Likes

Thank you Diego so much again ! ^^

You are the bubble hero for me.

Have a great one!

By the way the photo of the baby is sooo adorable!! ^^

1 Like

Thank you so much for kind help.

It will be absolutely lovely to have all those in easy access.