I’m trying to use the TMDB API to create my first bubble project, and I’m running into some issues displaying dynamic images from the data provided. As you can see here, each entry in the list includes a poster_path value, which can be inserted at the end of a url to get the relevant image.
I’m trying to create a dynamic list of varying movies from this API, which will include the title and poster for each movie. I’ve managed to get the titles to display no problem, but as the data for the images is also returned as text I’m not sure how to proceed with it. How would I go about displaying the relevant image for each individual movie in a case like this?
Any help is much appreciated.
Do you have screenshots of your API response as well as the repeating group (assuming) where you’re trying to display the image?
In a lot of cases, it could be because the image element where you’re trying to pull in the image isn’t returning it as a regular URL. Maybe just a part of it, or omitting the
Seeing your set-up might help!
Yeah sure, probably should have included those to begin with. Here is the repeating group, I want the images to display on the left side of each title:
Here is the results from my API call:
The value given from poster_path above needs to be pasted on the end of a url to get the relevant image, i.e.:
I’m completely new to bubble so I don’t even really know where to begin with this. Displaying text was pretty trivial, but this has me stuck and I can’t seem to find an answer online.
Can you show me the image element as a screenshot? What is the “dynamic image” expression you are using in that repeating group cell?
If I had to guess, are you simply using “poster_path” as the expression? If so, you may need to add
Yeah sure thing. Please keep in mind this is my first week using bubble so this is probably something super simple I’m overlooking:
^ This is what I had originally tried, although now I see it obviously just returned a text value within the image element and wouldn’t display anything.
^ I guess your suggestion above is what I’m trying to get at here - how do I actually call upon the parameter in the url? Right now, in the above, it just tries to display the literal url I entered. I’m assuming it’s something I’m not familiar with in either the API setup or Data page.
Just for your reference, I’m trying to build something like the IMDB search bar, where the movie posters and titles will be displayed alongside each other.
Welcome to bubble, it looks like you’re super close if I’ve read this correctly, and what viable is telling you is correct. All you need to do is make the [poster_path] part of your second image dynamic:
https://image.tmdb.org/t/p/w500/Current cell’s API Call result’s poster_path
Yup, that worked… it really was embarrassingly simple to figure out after all! It’s almost too intuitive so I assumed that it wouldn’t work lol.
Big thanks again to yourself and @viable
Hey, we’ve all been there. Glad you were able to get it solved!