Random picker component and images

Hello, I’d appreciate some help with the random picker component. It’s not very popular, so there aren’t many tutorials online – I watched them all, but I still can’t figure out if it’s possible to do what I need.

I have 2 collections:

  • Food (as Lemon, Carrot…)
  • Category (as Fruit, Vegetables…)

They are linked to each other so that 1 category has multiple foods. At the moment, the random component button is linked to Food, so each time the user clicks it, it picks a new Food and shows this food’s image.

What I need to do, is allow the user clicking on the random button to see multiple random images of Foods belonging to different Categories. For example, the user clicks the button, which brings him to a new screen. Here he can see 2 images of randomly picked Foods: 1 Lemon and 1 Carrot, so 1 from the Fruit Category and 1 from the Vegetables Category.

Is there a way to do this? If this function doesn’t exist yet, is there a way around it so that I can achieve the same result? Thanks in advance for your reply!

Hi @marina_f_s,

  • how many categories do you have in total? Just 2 or more?
  • how many pictures do you need to have on this “new screen”? Only 2 or more? What if you have 5 categories, how many pictures does the user see?
  • on this “new screen”, can user have (2 or more) pictures of the objects from the same category, or you need to display different categories?


Hi @Victor, thank you so much for your reply! To answer to your questions, there are actually 5 Categories, just like you assumed, and they’re linked to Food with a relationship: 1 Category has multiple Foods. On the new screen (accessible by clicking on the random picker), I’d like to have all 5 Categories, so that the user would see 5 different images of foods, each one belonging to a different Category. If possible, I would also like to learn how to display different Foods belonging to the same Category (for example a lemon and a strawberry belonging to Fruit, together with a zucchini belonging to Vegetables). I hope the explanation of what I have in mind is clear enough. Please let me know if you need more information, and thanks again for looking into this!

Oh, I should add that I tried to put 2 images on the same page and link them to the random picker button, but it was the wrong way to do things, because both of them displayed exactly the same picture belonging to the same Category

Hi @marina_f_s,

After some experiments, as for me, the easiest way would be to use unique IDs for each item in the collection and generate the temporary random IDs with RAND() function, which is built-in.

In brief:

  • add the property “ID” to the Food collection
  • naming convention could be: 1001 - 10XX for Vegetables, 2001 - 20XX for Fruits, 3001 - 30XX for Meat, etc.
  • Then, add 5 properties to User collection: RandomVegID, RandomFruitID, RandomMeatID, etc.
  • Before entering the “random choices” page, update logged-in user, and generate random numbers for each of these 5 properties. Set the range for “RAND” functions according to the IDs.
  • and then put 5 lists of Foods into “Random choices” page, filter each of them based on the respective random ID (you’ll get 5 images as a result).

This is pretty “straightforward” approach. It could work if you have pretty much “fixed” number of items in Foods category. If your app users add new items frequently, then probably some modified solution is needed.

Best regards, Victor.


This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.