How to superimpose text on an image

[deepak]

Hi does anyone know how to go about building a meme generator (similar to https://imgflip.com/memegenerator) using Bubble I’m not sure how the process of text being superimposed onto an image is achieved - thank you!

[joao1997domingues]

Hi @deepak!

You can just add a text element on top of an image, to make sure it’s above the image, right-click on the text and click “Bring to front”, and there you have it, text superimposed on an image

Hope I helped, if I did, please leave a like and mark as the solution.

Nice Bubbling

[keith]

Well, while that will look like what the OP wants to do, it’s not what the OP wants to do. The OP surely then wants to output an image file with the text rendered on top of it as part of the image.

There’s no components in vanilla Bubble that enable this.

But there are API’s for this and imgflip itself has one, described here: https://api.imgflip.com/

And here’s a quick demo I whipped up :

Signalizer

[keith]

BTW, OP, here’s how you set up the API Connector to use imgflip’s API:

As a more serious answer to your question: There’s kind of no point in emulating imgflip if you can just use imgflip. This little example is easy to reproduce. You could in fact write some code to do the image generation yourself, but I’m guessing that’s way beyond your capabilities at this moment. And… like Batman would say…

[deepak]

Hi @joao1997domingues - thank you for your response, it is more like Keith explained below but thanks a lot for replying!

[deepak]

@keith thank you so much for your detailed response (hilarious as well!)

Thanks, I am going to look into this - I have a specific domain name (blame it on) and wanted to make memes of a particular format. This would need people to upload images (like a batman image for Blame it on Batman) and then add a Text 1 and Text 2 - maybe I can use imgflip API - as you rightly guessed writing code is beyond my capabilities at the moment.

I love your demo!

[keith]

So unfortunately you can’t upload your own image to imgflip’s API, but there are similar APIs around I’m sure that would enable that.

There is also an NPM package for doing similar things, and more generic packages for image manipulation of course, but I’m not sure it’s worth putting the energy into building a plugin for that… but maybe.