How to reorder images in list on single item in db

I am building a classified ads platform (like Gumtree/Craigslist), where users can submit ads - and where an ad can have multiple images associated with it.

So I have a data type called ‘Item’, which has a field called Images which is a list of images:

Images are uploaded via a Multi-File Uploader.

I then take the first image which is used as the main image on the ad (see below) and when displaying the posts in a gallery view etc.

My question is - How do I allow my users to control the order of the images? I’d like to allow them to go into an ‘Edit Ad’ page and see the images they have already added (which I assume are ordered in the order in which they uploaded them by default) - and then change the order. It could be drag/drop or clicking an arrow to change the order (like this) - I don’t mind at this stage!

This is what the RG looks like:

Where the images are taken from the Item’s (i.e. the ‘ad’) list of images field:

All the questions and answers I’ve seen on this forum to do with reordering a repeating group assume that you are displaying a repeating group where each cell is a type rather than displaying a field list from a type (i.e. if I had Images as a type, rather than a field on a type) - so don’t help my situation.

I’ve tried to play around with setting Custom States, but haven’t yet had any luck.

Happy to set up a publicly available version of the project if any of you think you can help!

Thanks in advance :grinning:

1 Like

I think the easiest way may be to create a new data type…call it advert images…each data entry would have a field for image, a field to store the text value you would use to ‘related it to the advert’ (maybe the adverts ID) as well as field for sort order which would be type number.

Then put on the advert a list of ‘advert images’ and you could then on display sort by the sort order number.

When you want to allow users to re-order the images, set up a drag and drop system inside of a repeating group. Then on saving put the current cells index as the images sort order number.

1 Like

Complementing @boston85719 great suggestions, you can consider the following:

This video shows the concept of changing the data source of an RG … this way you can alter sorting logic Change the Data Source of a Repeating Group in Bubble

This other video shows you how you can build drag n drop functionality > Reordering lists - Build an app in Bubble

1 Like

Thank you both @boston85719 for the suggestion and @cmarchan for the additional - really appreciated you getting back to me!

I will go ahead with the ‘image as a new data type’ suggestion and drag n drop approach and see how I get on!

1 Like

Hey @cjrb

Just going to throw in another option for you here, to accompany @boston85719 and @cmarchan already great solutions. A while back, I put something together which was similar to what you need, but the user could swap 2 images with one another in a list. It might not be entirely suited but it works with JS and custom states rather than having the sort option as a field in the DB.

Added benefit of being nice and quick, if you can dissect it, maybe it will help.
Just select an Image set and then you drag the images.

View it: “https://paul-testing.bubbleapps.io/version-test?debug_mode=true

3 Likes

It’s a good solution. I bought a permanent license of your plugin, but I can not use it in my application so far because of two reasons:

  1. Changing order of item in table does not change its index. In each table I am useing the expression “Current cell’s Index <-modulo-> 2 is 1” to changing line shading in the table.
  2. In workflow does not contain information about order of changed item.
1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.