I am encountering an issue on a page where I display a list of badges, coming from two distinct collections:
Badge Collection: This collection contains all my badges, with two versions of each badge image: a black-and-white version (for locked badges) and a color version (for unlocked badges).
Unlocked Badge Collection: This collection is linked to my users and contains the badges that have been unlocked. It allows me to track which badges have been assigned to which users.
What I want is for the badges that have not been unlocked to appear in black and white, and the ones that have been unlocked to appear in color in the list displayed on the page.
However, I am having trouble setting up the conditional display correctly. Currently, I am facing the following issues:
Even after creating a filter to differentiate unlocked badges (color display) from locked badges (black and white display), the conditional display is not working as expected.
I am unable to correctly hide or show the color and black-and-white versions of the badges based on their status (locked or unlocked).
I’m seeking your assistance to resolve this conditional display issue.
I used one collection and two lists on the badge page — one for Unlocked badges and one for Locked badges.
Both lists pull from the same collection, but they display different badges based on whether the logged-in user is included.
When a user clicks on a black-and-white (locked) badge and meets the required conditions (like a certain number of streak days), they are added to that badge’s “users” field. This causes the badge to change from black-and-white to colored for that user.
To manage which badges show up where:
• I set the “Locked” list to only display badges where the Current Badge > Users does not contain the Logged-In User.
• I set the “Unlocked” list to only display badges where the Current Badge > Users does contain the Logged-In User.
• As a result, once a badge is earned, it disappears from the “Locked” list and appears in the “Unlocked” list automatically.
