How to circulate and feature images

[lorrmuee]

For example, each datatype has 3-5 pictures that users upload themselves (Multi-File Uploader).
On the detail page, there are only 3 placeholders for images: A & B and one large frame C (featured image).

When a user clicks on image A or B, the featured image will be replaced by that one. This works fine via custom states yet.

How can we make all of them cycle through the frames?

[flusk]

Hey @lorrmuee

If by cycle through, you mean to update it automatically at some regular times, you can do this in by scheduling an API workflow every night, week or whatever frequency you want.

See the details of API workflows here: Scheduling API workflows | Bubble Docs

I hope this helps.

@Huseyin from Flusk | Discover the #1 Security and Monitoring Tool for Bubble

[lorrmuee]

Thanks @flusk but the cycle through should happen when the user interacts by clicking (click by click)

[flusk]

Then, you should give another example of how it should work with 5 pictures maybe. Because I didn’t understand the problem

@Huseyin from Flusk | Discover the #1 Security and Monitoring Tool for Bubble

[ambroisedlg]

@lorrmuee

Maybe that plugin can help - look at this demo page and scroll down to the ‘Additional examples’ section

[lorrmuee]

It should work like a manual slideshow. The example has 3 visible image placeholders, where the other images are hidden until A or B gets clicked.

((Users can navigate in left direction by clicking A or right direction by clicking B))

Like when a user clicks on Image A → Featured Image gets replaced by A → D gets replaced by previous Featured Image and so on…

On every click the images cycle one step and a hidden image becomes visible.

Since these are user-uploaded pictures, im unsure how to assign each one an index or something similar to inform Bubble of their order. If that makes sense. Lastly, to ensure a smooth user experience

[flusk]

Hey @lorrmuee

Alright. One solution is to use another data type called Rich Image with an image and an order. See the demo below:

The demo works exactly as you explained in your last post.

Technical details:

• Here is the Rich Image data type:
  • 
• The user has a list of these images and one featured image (of the same type):
  • 
• Adding to this list is same. You create a rich image and add it to user’s list:
  • 
    • Be aware that, the order is dynamically incremented with each new image. All trick is in this order field.
  • 
• This big one shows the featured image:
  • 
• The first small one (the left button if you will call it) shows the first item of the rest of the images (it means except the featured image). The images are sorted by order in increasing order:
  • 
  • This pictures does the following:
    • Put the featured image to the end of the list by setting its order 1 more than max:
      • 
    • Get the first image (excluding the featured) sorted by order in ascending and set it as featured.
      • 
• The second small one (the right button if you will call it) shows the second item in the same way.
  • 
  • This works in similar way but instead of putting the featured image to the end, it puts it to the beginning by setting its order one less the minimum:
    • 
  • And get the last image this time to make it featured:
    • 

It may or may not be ideal to create an extra data type. So this is your call.

If you want to check the whole editor, here it is: Bubble Demos by Flusk | Bubble Editor

I hope this helps.

@Huseyin from Flusk | Discover the #1 Security and Monitoring Tool for Bubble

[lorrmuee]

Thank you so much @ambroisedlg for your suggestion and @flusk to supply me with this great step by step guide. <3 You guys are awesome!

Now trying to understand the logic and impliment it into a p2p marketplace use case.

Do you think it’s better to store all rich images of products separately, linking them to a product datatype, or to directly include each rich image within the product datatype?

[flusk]

@lorrmuee

Do you think it’s better to store all rich images of products separately, linking them to a product datatype, or to directly include each rich image within the product datatype?

I think this depends on other design in your data system. Adding a column in Rich Image for a product would be fine. Or a list in Product, like I did above would also be fine.

Some say, the first option is faster.

@Huseyin from Flusk | Discover the #1 Security and Monitoring Tool for Bubble