We are trying to build a blog on our site that will have images and text. Ideally we want to be able to add three types of images:
We can get these to work individually, but it’s not going to be pretty. And saving more than one of each type can’t be displayed properly and saved, because it won’t know which input we are using, and which we are not.
What can we do??
If you are only allowing one image per post, then you just need a single image field for your post data type. All photo options go to that field, overwriting the previously added photo if they decide to use a different method after starting with another. Format the single image element so that no matter where the picture is coming from, it’s still styled the way you want. (You can force a rescale).
I would actually have all three upload options next to each other versus spread out on the page. Have a general label: Upload a photo; and each input labeled as you have it in the screenshot.
If you are allowing multiple images per post - say one from each method - Then you’ll need to decide how you want multiple images to be displayed on this edit post page. Likely a repeating group? But the same database logic applies - your single image field is now a “list of images” rather than one. Each input/upload method ADDS an image to that list.
Is this what you’re trying to achieve? In the end, all methods save an image, so your element to display doesn’t know the difference. Either go with a single image element to read the single image field or go with a repeating group that reads your single image field which is a list of images - add and stylize a single image element in the cell since each cell will then display each image (no matter where it came from) the same way.
The problem we have is how to save an unspecified number of images from any of the input methods without saving “empty” images, which are not being used, in the one list of images.
In order to save three urls generated images, for example, we would need three URL inputs with three image boxes etc. but if we choose to only select one URL, the other two empty ones are still being saved. This gives us blank spaces in the repeating group where the images should be.
Oh I see why - I’m assuming that 1 save button saves the input values from all fields whether they’re empty or not empty? Why don’t you try setting up conditions on that save button…
“When search field is not empty” add image to list
“When URL field is not empty” add image to list
“When Picture Uploader input is not empty” add image to list
That way, when they ARE empty, blanks don’t get saved. I’d also try putting OR statements between them so that it’s all in one workflow action… but I don’t know if that works… If 2 are true, for example, they both get saved - or if just one of the true statements get saved and you’d have to split, but you could try it to consolidate your workflow.
While you can put all 3 images in the same place (overlapped), and just the “not empty” = visible, so each entry will have a image in the same spot
Yes, I want multiple images per post. But I want them from multiple inputs… from URL, image upload or multi file upload and from the user’s existing images. Any number of images from any number of inputs.
I think the best way then is for the post data type to contain an image field that is a list of images, and then each input method adds its image to that list. Displaying that list can happen in a repeating group.
hmmm… But wouldn’t’ that mean that we would have to have “created” (ie Saved) the blog post first, before being able to add any images?
Yes, if the blog post hasn’t been saved yet, you’d check off the “create a new thing if it doesn’t exist” box in your workflow to create the post. Then your save button for the rest of the content would need to save to the same entry…
I actually built a blog for a client recently, and my workflow was as soon as the button to create a new post was clicked, a new post entry was added to the database - empty fields, but it’s created. I have a featured image that gets saved to it once it’s uploaded and then a publish/“save draft” button to save the text content. I also have a discard button that deletes the entry if the user changed her mind about it altogether. But the point is that the entry gets added to the database at the start, which helps create a drafting environment too if the user wants to come back later to finish.
How many images did you allow, and what type of images were they (URL, upload, multi file upload, existing in the database? ) and how did you display them?
We’re trying to find a compromise because with Bubble we can’t have “add any image you like, from wherever you want it, into the middle of the text”.
I ran into the exact same issue because I imagine you’re also offering a rich text input for the body of the post. I think I mentioned this in another thread somewhere that you chimed in on. I wish it allowed for direct uploading into that editor.
Right now, I just have 1 image per post to be the featured image for the post. It’s added via the picture uploader and my blog post page displays it below the title and above the body just as a header image for the post. I’m still trying to figure out a solution to display images in between the text … I’ve thought about having the user create “sections” - so if there needs to be a picture below a paragraph, add a section that will be a picture, then add another section that will be a new paragraph that is from the value of a 2nd rich text input. And so forth. The display will be a repeating group of this content with hidden elements to only be visible if these sections are not empty. It’s rather cumbersome, so I haven’t totally convinced myself that this is the best way, but it could work. It doesn’t really allow for much formatting on the user’s side.
So … it turns out you can drag and drop images from a repeating group into the Rich Text Editor.
You can drag and drop pictures into the multi file uploader, and display existing ones. And then drag them into the blog post and they are correctly formatted and savable.
It doesn’t format very nicely on some images. But it does work.
Whoa!! Awesome. Going to try this.
