How to show text and images from your database in Bubble
In this Bubble.io tutorial we demonstrate how to populate a page with dynamic text and image data from your database.
Unlock dynamic data display: Learn how to show product details from your database on a Bubble page!
Master product page templates: Create a flexible reusable element to showcase all your products effortlessly.
Dive into dynamic content: Discover how to link product data and images for a professional marketplace look.
Displaying Dynamic Data in Bubble
Here's how to display dynamic data, meaning taking data from your Bubble app's database and displaying it on a page. So I have the beginnings of a marketplace app here and the early steps of a product page and I want to be able to link up text to show a product name, a short description and a price and an image.
Creating a New Data Type
So I'm going to data and let's create a new data type called product and then I need to add some fields. So Bubble supplies these default fields but I need the fields that I want displayed on the page so let's work through those. So let's call it title and then this is a field type text and then let's have a look we need short description that's also a text and what else do we need price and image.
Setting Up Data Fields
Okay so price I'm not going to go text I'm going to go with number and that's just so that's easier for me later on to do calculations with it. Now there is a function in Bubble to change a number that's expressed as text into a number but it's just an extra step. So by placing it as a number that then means I could easily apply like a 20% discount in the future because it's stored as a number rather than like a series of numbers stored as text. So from like a coding lingo it's being stored as like an integer rather than being stored as a string it just means I get to work with it as a number and not text and then we need an image. So let's just go for thumbnail and this is type image.
Adding Data to the Database
Okay now once you've really built out your app you will probably have a front-end interface that you'll build in Bubble a way to add items whether it's products or contacts to your database but just so we can get moving get started you can add them directly in by adding in an entry here. So let's go with title we'll go with sneakers and then short description these are really great sneakers and price let's go for a number here we go and just adding in an image there and so we click create. So that has created an entry in the database for of a product so how do you display it on the front end.
Creating a Product Template Page
So I'm going to be showing you a way to do this which involves basically creating a template for a product this page here which I've called product which can then be used to display all of your products say acts as a template rather than having to design a different page for every product. So in order to do that I have to make sure that my page content is set to product and that then means that I can add in dynamic data for current page product title, current page product short description, current page product price.
Formatting Dynamic Data
Now because the price is saved as a number it's not going to have any formatting so I can go for a format as change it to currency let's put in two decimal places and then actually what I was really looking for was a dollar sign here we go and then finally image dynamic image and go current page thumbnail and then to make my app really accessible I want to put an alt tag in there that's what you get when you hover the mouse over an image it displays a description of that image if the web designer or the website creators bothered to put that in that's good for SEO and it's also improves your accessibility for people who use screen readers so it's a good thing not to miss so I'm just put in title so it's going to say the products title like sneakers thumbnail.
Previewing the Product Page
Okay now what happens if I click preview let's have a look. So you'll see that if we look at the URL we have product and then we have a following bit of information let's just ignore this this is part of the Bubble development test mode and but it's basically dummy text and that's because I've clicked preview and it doesn't actually know which product remember from my database you know I could have a hundred in here how does Bubble know which one to load in so I'm just going to do a really quick repeating group on my index page to be able to link through to it because at the moment I've got no way of accessing that product basically to to change a bit after hit here this dummy text into one into a slug part of the URL which identifies this product to display on this page so what I'm going to do is just add in a really crude repeating group just search for product and then I'm gonna add in a link and the link is going to be the products title and it's going to link through to product but then it needs to send data and so this is how I send across this is the product I want to show current cell's product because this is a repeating group that shows all my products now if I hit preview let's see what happens okay so there we go I get sneakers and if I click on sneakers comes through to the page there is my thumbnail there's my title my short description and my numbers my number field formatted as a currency
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.