Forum Documentation Showcase Pricing Learn more

Create small template (Block)

I am looking for someone help me to build this feature in my app ( Maybe Someone with experience in CSS ,JS ) , the block divide into 2 parts : popup page ( creation phase ) , display page .
What i need is :
Created popup Area :

1- User can select specific image & then type text & drag / drop it on specific area of the image (Ex. If there are 4 places where i can add texts on the image ) then user can type 4 texts then drag/ drop each text on the wanted places . Note : user can add 1,2,3 or 4 Texts maximum on the image

2- The text will save In the data base + the wanted image + User who add the text
(Ex :User ID= ASERw1, image ID = ABCD , Script (Text list )= Hi what is your name? Thanks ,…etc )

Display Area : ( Hardest part ) !

3- Image + Text will display in the different page as a final result ( image + text on it )
Note : the text will not move or disappear if the page resized ( responsive final design )

4- User will be able to download (image with the text )

I don’t know if it is possible to apply this feature using bubble
please if any of the information not clear , don’t hesitate to message me
Best Regards

It seems possible, using a combination of having a group with the image as a background and texts positioned where they should be, then using “element to image” plugin to take a snapshot of that and saving that snapshot as an image.

Hi,

This can be done using the draggable elements. You can create 4 areas using this element on top of a group which has the image as the background. You can then save this group as a Jpg file using javascript. let me know if you need help putting this together.

Cheers,

Anil

Hi,
I can be a help to you.
Kindly check your PM.

Regards

hi
this is hayden
i can help with your requrement.
you can add me on skype: cis.am4 for related queries.
you can also mail me on [email protected]

Hi , thanks for the help , it seems very smart solution , but i have tried to do it and unfortunately it didn’t work , maybe i’m doing it wrong , please check the screen shot . I directly selected the download option without the need to convert the element first !

Also for better understanding on what i try to accomplish visit this link : https://draggablecopy.bubbleapps.io/version-test/index/sample:custom.main_art?debug_mode=true

Hi anil thanks for your support , please visit this link for further information : https://draggablecopy.bubbleapps.io/version-test/index/sample:custom.main_art?debug_mode=true , for sure any help to accomplish the feature highly appreciate

Best Regards

Try reaching out for the plugin author, they’ll be able to guide you on how to use it.

:floppy_disk: Elements/Groups to Image (Free Plugin) - Showcase - Bubble Forum

Hi , @vini_brito , i hope you are doing great , i am messaging you to know if you can help me here with this feature , I were asking lately for a plugin that can download group as png image , but this plugin : 💾 Elements/Groups to Image (Free Plugin) is not the right plugin because the group downloaded with empty image . I found another plugin called anything to image : https://pwc-anythingtoimage.bubbleapps.io/ can do it , BUT :
1- This plugin doesn’t support Arabic language ( very important for my App )
2- It needs 2 workflow action and cause delay, you can check it, by click on the “download” button , then another generated button will display !

  • unfortunately the developer doesn’t reply to my messages or anyone here in the community

  • Is there another plugin can do the same service ? or at least if you know someone who can develop something similar , please provide me with his name !! or any idea can help me to apply this feature !!
    BR

Hello! Sent you a private message.

I see Bubble just added an Elements Template section to the app. There is one element in there called Tab Element.