How to Create Dynamic Images in Your Bubble Application – ratio.dev

Wouldn't you like to make your bubble applications more shareable, make them add features that make them go viral? If that's true, then you're in for a treat today. Because today I want to show you how to create dynamic images in your bubble application using a tool called dynapictures. And there are other tools similar, but everything you're going to learn in this video is going to be applicable using the platform that you decide to use. So what I'm going to do, I'm going to start off with an overview just to kind of give you the concepts of what we're trying to accomplish. I'm going to talk to you a bit about Dyna Pictures and why it's a good choice. We're going to see how to set it all up with the API connector in Bubble. You guys by now know that the API connector is one of my favorite places in the bubble builder. We're going to look at the specific bubble workflows that you're going to need to set up and then we're going to wrap it up with a bow and send you off on your way. So let's just jump in and get started.

First of all.

Here'S an example of a dynamic image that we set up for one of the applications that we've built. It's called Auction Tracker. And the idea here is that you can publish into the social feed of the application automatically from your history of trades, your top trade for the week, and it will create an image like this that you can share on social, social media, and it will automatically share it within the app as well. So, you know, it's pulling in information from your bubble application and adding it in and making this custom image, this dynamically created image that people are going to be really happy to share. And I think this is a really cool feature that you probably would like to have in your applications. So let's look at Dyna Pictures roughly here from the beginning. You can see here you can go to their site, this is just their website that I'm looking at here. But it has an infrastructure that allows us to create templates and adapt them to data that we're going to pass into them. And then it will give us these custom images that we can use inside our bubble application, or you can use them anywhere else that you want to use as well. Dyna Pictures is easy to set up. It's really easy to create templates that you can adapt. It has a super powerful API feature, which is what we're going to leverage to Connect our Bubble application with dynapictures. It's reasonably priced, but let's just jump in to the actual Dyna Pictures dashboard. Here you could see there's a bunch of templates that they've created that you can start off with, or you could build your own background image and create your own template, which is what I've done here. Here you can see that we have a template of the image I was showing you earlier. So you can see that it basically is kind of like a really simple.

Photoshop sort of thing, where all you can do is set layers and these layers can contain static text, like here, last week's. That's just a text here. Here we have. I'm going to go back to the layers. This is the last week's. And this is another static text here. I have what I've called, and you can name these whatever you want. I've named this trade. This is where it's actually getting the information from Bubble. It's a string. And one of the cool things is, is that you say, well, what if it doesn't fit? What if it's too long or too. Or too short? Well, dynapictures is really smart in that it will automatically adjust the font size so that the content of the data that you stick in there will fit. So, I mean, obviously if you pass it the King James Bible in there, it's not going to be able. You're not going to be able to read it. But as long as you do something reasonable, you're going to be good. So you can see, this one is smaller, this one is bigger because I'm passing it smaller, a smaller string. This one has its own size here as well. I just create this template and then when I'm ready to use it, all I have to do is click here on Generate and I'm going to take the option via API and this is going to give me the JSON that I'm going to need to use from my Bubble application to put it in. And we're going to see that in a minute and it's going to give me as well. These are all of the parameters that you can pass through so that you could test things. And it also gives me this cool URL, which is the endpoint of the API that I'm going to use for this specific template to generate this specific dynamic image. So the only other thing that you're going to need is you're going to go here to your Settings section in Dyna Pictures and you're going to scroll down here to where you get an API key, and I'm supposed to not show you too much. Now you're just going to copy this API key because you're going to need that to be able to connect your bubble application to this dynamic pictures template and generate these custom dynamic images. With that in mind, the next thing we're going to do is we're going to go into the bubble application and see how we get this all set up. So let's do that. I'm going to go here to Option tracker, and what you're going to do is you're going to go to plugins and you're going to go to your API connector. So the first thing you're going to do is you're going to need to create an API section for Dyna Pictures. So I have one already here. I'm going to expand it out and you can see here, this is where I'm going to put the word bearer, a space in my token, my API key that I copied from Dyna Pictures into. Here I'm going to create some headers that I'm going to use for all of these API calls. They're really kind of very standard, but there you can see what they look like. You can copy them into yours here. And then what we're going to do is we're going to create a specific API call for each dynamic image that our application is going to be using. And in this case, I'm just going to look at the one that we were looking at, which is called, I've named Top Trademark. And so I'm going to expand this out and what I'm going to have here, it is going to be used as an action. That means I can call it from a workflow. It's not going to return data. It's going to take a JSON as its input. It's going to use a POST method. And this is the URL that I created for my template. The body type is going to be JSON. And here you're going to copy in that structure from Dyna Pictures and paste it in here. You say, okay, well, but how is it dynamic? Well, here's the secret in here. For these text that you want to make dynamic, you're going to change what they give you as the kind of placeholder text in the API call that you copied from Dynapic, and you're going to put it in brackets with a name of the variable. So here I've created this one as trade. This one is the Percentage, which I've called roi. And here's the name of the account, which I've called account. And once you've done that, these parameters are going to show up down here in your API call section and you're going to paste in some placeholder text and I'll be sure not to make them private because you're going to want to set them from the workflow. In my case, I'm not going to let them be blank. And basically once you've done that, the only thing you need to do is step three is to test it out and initialize this API call. And so once you do that, it's going to actually.

Make the API call and it's going to show you the response and you're going to save the response. And this just means that it's going to send you the URL for the generated image, it's going to send you a thumbnail URL and a high res thumbnail URL if you want as well. And it's going to tell you the width and the height. In this case it is 1080 by 1441. Just save this. And now you have a working API call to use in your bubble application. So the next and final step of this video is for us to look at how we set this up in the bubble workflow so that you can incorporate this into your application however you want to use it. So when we do this, what we're going to do now is I'm going to go into, I have this in a backend workflow. So I'm going to come here and this is in a section called Community, and I have a custom event that I created that I can use just wherever I want. But you can put this into basically any bubble workflow as you want. So in this case, the first thing I do is I call my API call and because it was an action, now it exists and I can just add Dyna pictures. And here I'm going to pass in the data that I want to have put into the dynamic image. In this case I'm using parameters that I'm calling from this custom event. But these could be any, you can put any variable, any kind of evaluated expression in bubble here. And then once you call this, then the next step in this is in my case is I'm just taking the result of that API call and I'm storing the URL in my database. And then you can go on and do whatever you want with this inside your application so you could present it to the user you could let them download it to their root browser. You could do whatever you want. If you've got a Facebook integration set up you could post it automatically to their Facebook. This is a really powerful thing to be able to incorporate into your bubble application because images are very shareable and the fact that you can pass images as parameters into this API workflow as well. So you could take the user's profile image if you have that stored in your bubble database and you could pass that in and you could have their image, their face be inside this dynamically created image. This can be awesome for the certificates, it can be awesome for share images for all sorts of use cases that you might want to use inside your bubble application. So I hope you've enjoyed that. There's not really much else to explain in this video. Let me know how you're using this in your bubble application. I'd be really glad to hear that and see you on the next video.