Hello everyone
From your experience, do you reckon is it possible to build something like this with bubble?
A “poster generator” that allows you to personalise couple of visual, add your text, personalise a colour, upload a file and download the final results (a bit like canva.com but simplified)
Looking for this as well but more for a proposal builder if anyone has insight, we are using 8 block templates that hide show content based on “block type” such as text, image, video, etc.
It can’t be done drag and drop from what I’ve explored and that would be much more convient, plus load speed is awful.
This poster builder seems to be using the same logic needed as for our project
Would love to hear more about this as well. Have tried poking around in inspector on canvas.com but cant figure out what libraries they use (besides quill). Any insight from @david17 would be appreciated
Before starting: the biggest catch is Bubble doesn’t allow you to create new objects on the fly, so you’ll need to plan for the maximum number of elements on the page that you’d like to support.
Here’s about how I managed it:
Create a canvas element as a Drop Area. You can resize this using some Javascript, based on user determined options.
Create all of the elements you’d like to support as a Draggable Group, and place them all in the same location with respect to the canvas (maybe in the top left corner at 0,0).
Start all draggable elements as hidden, with a condition to hide them when a custom state (I used custom states on the canvas element) was triggered.
Create a menu side bar that will be used to hide or show the draggable groups by triggering a custom state to update. Could be a list of texts, or multiple states, but each draggable group needs to read from the right custom state that will control its visibility.
Then, you should be able to drag the groups around the page. The x,y coordinates of the top left corner are now available as one of the elements outputs. You can save each x,y coordinate as a field on the object in the page (in addition to the content of the actual thing, like background color).
When you return to the page after saving, you can move the draggable groups with a workflow to their saved positions. (I would move them before showing the group).
Would you mind sharing the data type architecture for this?
I’m not creating an interactive poster generator, but something very similar that allows users to upload and manipulate content. But I’m stuck on how to plan out the database. Would love to see what you did for this so I can draw inspiration.
