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?
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 https:.
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:
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 https://image.tmdb.org/t/p/w500/[poster_path] instead?
^ 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:
Can someone post a screenshot of what this should look like in the appearance properties…I can’t figure out if there’s an operator that’s supposed to go between the endpoint portion of the URL and the file path part of the URL.
Hi Ed. Thank you for looking into this.
The image of the text I posted was simply the image capture of the output from a text box I used to verify the output is correct. The image below shows the related fixed string and the dynamic API call data.
That looks like it should work, can’t see any reason it wouldn’t since you’re passing the correct url to the dynamic image field. I’d need to look at it to glean anything further. If you’re happy posting the front end page I can see if there’s any useful information there.
Ed, I don’t know if the preview pages are desinged to be viewed by a 3rd party individual. Let me know if you can’t get to this page: Dashboard
click on the “Movie Database” tab on the left pane. Then click on one of the movie links and it should take you to the preview page where I’m trying to show the image.
It looks like the title is empty in the payload you’re sending, meaning the call returns 0 results. I don’t know this API but I’m guessing title is the search query, so your dynamic title data isn’t populating properly somewhere, maybe a privacy issue?
