Make dynamic images from groups?

Questions
1

Hey there everyone!

I’m looking for a good plugin for turning groups into images to use dynamically for social graph images.

Anything that you’ve found that works as advertised?

Thanks!

2

I think you might be able to use the built in function on the group element to set the background style to image.

3

Oh sorry I should clarify - I have a forum post. I essentially want to take the whole group (with the forum post title, Creator’s profile picture, # of comments, etc)

And then turn that whole group into an image, to then use as the social graph image for Facebook/Twitter/etc so it’s dynamic for every post.

4

There are several plugins that can do this. Good luck!

https://www.google.com/search?q=bubble+groups+to+image+plugin&rlz=1C5CHFA_enUS810US812&oq=bubble+groups+to+image+plugin&aqs=chrome..69i57j33.3011j0j7&sourceid=chrome&ie=UTF-8

1 Like
5

Yes, I was confused. Never even thought about the idea you were asking about. Glad I found out about this possibility…I think it would be great for a ticketing system I am creating.

6

@AliFarahat you know a way to turn a group of elements into an image to save to a database object field?

Have tried some other plugins to no avail.

This would help with creating dynamic social share images for any page with a data type set (people, products, etc.)

7

Hey @joe5

I have a puppeteer google clould function that gets specific data from an Instagram profile. Since its based on puppeteer it can be altered to render the an image of a page or a specific element. It’s not the fastest but its robust. Another option is to go with a library like this one https://github.com/tsayen/dom-to-image but I never tested that.

8

Have a look at this service

9

Nope. That’s not it.

10

have any alternatives, Keith? for turning a group of elements into an image to save to the database?

11

Try looking at “html to canvas” options. Not overly experienced with js but there maybe a library you can use and then you just need to get the content results into bubble with a workflow. In theory.

12

I don’t know if any of the existing plugins for this are any good, but did you try this one?

13

I still can’t seem to find any group > image converter plugin that works.

I’ve tried Anything 2 Image and the free Elements/Groups to Image.

@levon I don’t see any documentation for the Anything 2 Image converter - is there an editor link anywhere?

I am trying to create& save this dynamic image for all Nucode.co user profiles >

image
image712×370 46.1 KB

1 Like
14

here is the editor link - https://bubble.io/page?name=index&id=pwc-anythingtoimage&tab=tabs-1

15

Thanks! I’ll see if I can get it working.

16

@levon is there a way to save the new image to the database? that workflow doesn’t seem to work for me when Saving the new image to the current page user’s image field.

17

@joe5 can you show your workflow as a screenshot?

18

image
image1660×1230 252 KB

image
image1156×702 74.3 KB

19

I figured it out!

Noticed you have another workflow for when the image is successful, so I was saving it too soon.

For everyone else:

  1. Create a workflow to create the image using Anything 2 Image.
  2. Create another workflow that triggers once the Anything 2 image converter is Successful:
    image
    image732×754 59.3 KB
    that then let’s you save the Anything 2 Image’s image to the database.
3 Likes
20

Hey again!

So - creating a single image was doable for a regular group.

I did try with a popup as well as a hidden group, since I won’t want to show the social graph image really, but that doesn’t work unfortunately.

Now I’m trying to wrap my head around how I could create a workflow to dynamically create all 1000+ users social graph images.

I’ve tried placing the component in a repeating group along with a group to take a pic of, but unfortunately that doesn’t allow me to run a workflow on that Anything 2 Image element when it’s in the repeating group.

Know of a workaround?