Show a collection of images inside a pop-up

krazitoast · 2020-09-04T17:04:44.775Z

Hey, my app so far is where users can post a listing of what they want to sell, which therefore means I have a ‘post’ data type and within that I have a ‘list of images’ where users can upload what they are selling. I want to make it so that when the user clicks the pop up, it shows that specific ‘posts’ of images. I’ve gotten so close but cannot seem to get it to 100% work. At the moment I am using the multi-file uploader plugin, and for some reason the pop up will only display the image if the image count is 1. I have a link to my project if needed. Any help would be great.
Thanks alot!

sudsy · 2020-09-04T18:12:30.111Z

krazitoast:

for some reason the pop up will only display the image if the image count is 1

What type of element are you using to display the images in your popup? The Bubble-native way to display more than one of a Thing is the Repeating Group element.

krazitoast · 2020-09-06T11:29:12.764Z

sudsy:

are you using to display the images in your popup

Yeah I’m using a repeating group.

sharma.himanshu0608 · 2020-09-06T12:32:09.926Z

What’s the type of content and data source that you’ve set of the repeating group?

krazitoast · 2020-09-06T13:00:33.768Z

Type of content: image
Data source: Parent groups post’s image

sudsy · 2020-09-06T13:36:36.749Z

Assuming “Parent groups post’s image“ is a list, have you confirmed that multiple images are actually in the database for that post?

Also, how many rows/columns is the RG configured to display?

It might help to post screenshots and/or provide view access to the editor.

krazitoast · 2020-09-06T17:23:50.061Z

Yeah, its weird because if its only 1 image and not multiple images in the post, the repeating groups shows the image, however if its multiple images it shows a blank repeating group.

krazitoast · 2020-09-06T17:29:23.202Z

Screenshot 2020-09-06 at 18.26.352020×1424 282 KB

Screenshot 2020-09-06 at 18.27.072020×1050 205 KB

Screenshot 2020-09-06 at 18.27.172020×1050 193 KB

Screenshot 2020-09-06 at 18.27.372020×1050 195 KB

Screenshot 2020-09-06 at 18.27.522020×1050 155 KB

ambroisedlg · 2020-09-06T17:44:48.920Z

@krazitoast it seems the images you uploaded (for the product which you’re having a problem with) have been combined into one image, therefore one URL. That’s what I see when checking your data for the product:

private_image759×215 10.2 KB

Here is the picture’s URL when you click on the ‘See’ button: https://s3.amazonaws.com/appforest_uf/f1598094134815x450428253632900100/bass2.jpg,%20//s3.amazonaws.com/appforest_uf/f1598094135309x794872257488298000/bass1.jpg

However obviously it should be:
1st picture: https://s3.amazonaws.com/appforest_uf/f1598094134815x450428253632900100/bass2.jpg
and 2nd picture: https://s3.amazonaws.com/appforest_uf/f1598094135309x794872257488298000/bass1.jpg

There must be an issue when you (or the User) uploads the pictures for the new listing. So I digged a little deeper and found that whenever you create a Post, you’re adding the Multi-file Uploader to the list of Images on the Post, instead of setting the list to the Multi-file Uploader’s value:

error-set-list1120×633 59.6 KB

That’s why it’s just adding one image. When there are two images in the Uploader’s value, it combines them together, therefore causing your issue.
Just change Image add to Image set list and you should be good to go

Hope that helps
Ambroise

Need extra help?

Book a free 15 minutes call - happy to help if I can

krazitoast · 2020-09-06T19:29:39.443Z

Thank you so much, I’ve been stuck on this for weeks now and it was such a simple mistake! Will book a call if I fall into another problem cheers!

ambroisedlg · 2020-09-06T19:34:32.243Z

@krazitoast happy to help! Don’t forget to put your editor back to Private mode. Happy bubbling!

Ambroise

Need extra help?

Book a free 15 minutes call - happy to help if I can

sudsy · 2020-09-06T20:11:51.508Z

krazitoast:

if its only 1 image and not multiple images in the post, the repeating groups shows the image, however if its multiple images it shows a blank repeating group.

Looks like @ambroisedlg identified the issue for you.

Technically, what was happening behind the scenes is that Bubble was auto-converting the list of images into a comma-delimited list of URLs and using the resulting string as the URL for a single image. Obviously, it is an invalid URL, so no image appears.

Since you’re dealing with lots of images in your app… If you haven’t already, you might want to devote some thought as to how best to manage the uploaded image files. If your app gains traction, you could potentially chew through your [pricey] Bubble storage rather quickly - especially if users upload lots of “hi-res” multi-megabyte images from their mobile devices.

It’s important to realize that simply deleting a post, will not automatically delete the files associated with that post from your Bubble storage. You must explicitly delete the files in order to reclaim that storage capacity and prevent “orphaned” files. This is also a consideration if you’re allowing users to edit existing posts - i.e. add/remove pictures. This thread might be helpful.

Additionally, automatically downsizing images before they’re uploaded can dramatically cut down on storage requirements. That’s exactly what Upload Buddy does.

Regards,

-Steve

ambroisedlg · 2020-09-06T20:15:26.294Z

Didn’t know about Upload Buddy until now, learnt something useful today thanks @sudsy!

Ambroise

Need extra help?

Book a free 15 minutes call - happy to help if I can