# Display image based on status **URL:** \ **Category:** Ask for Help\ **Created:** [December 18, 2023, 7:12pm UTC](https://community.glideapps.com/t/display-image-based-on-status/68823 "2023-12-18T19:12:29Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![ckinross](https://avatars.discourse-cdn.com/v4/letter/c/3ab097/32.png) [@ckinross](https://community.glideapps.com/u/ckinross)\ **Post date:** [December 18, 2023, 7:12pm UTC](https://community.glideapps.com/t/display-image-based-on-status/68823/1 "2023-12-18T19:12:29Z")
I am creating a system of badges in which the Name of the badge, and it’s description, is always visible within a grid but the actual badge image changes based on status. - Badge earned: See the badge in full color (call this ImageA) - Badge not earned: See a greyed out version of the badge (call this ImageB) Using the wonderful advice offered in the following thread, [Display Hero Icons as images in List view based on condition - #15 by Jeff\_Hager](https://community.glideapps.com/t/display-hero-icons-as-images-in-list-view-based-on-condition/64009/15), I was able to make it this far. Two Glide sheets are being used 1. Users to tap into the Row Owners feature so that people see their individual badges 2. Badges to contain badge name, description, and image. Each badge has two rows (one with image in full color, one will greyed out version) So far, the following works - A boolean field (“I See You”) captures if an action has been completed in order to earn the badge. - An If Then Else columns checks the boolean field to determine which row in the Badges sheet is relevant. In this example, if ‘I See You’ is checked, then refer to row 1 in the Badges sheet. If ‘I See You’ is not checked, refer to row 18 in the Badges sheet. - A BadgeRelationStatus column uses the ITE column to return the appropriate badge image. ![Screenshot 2023-12-18 at 11.06.05 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/7/977b9f9b3e9165b668bda16ff961c778522b4d9b.png) Then…I’m stuck. My plan was to use the Fields component to display the badge image and description but it appears that Relation columns are available to the Fields component. Does anyone see a way to finish this? My goal is to be able to show all of the badges available but have the badge image change when the badge is earned. Thank you ---
**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\ **Post date:** [December 18, 2023, 7:26pm UTC](https://community.glideapps.com/t/display-image-based-on-status/68823/2 "2023-12-18T19:26:07Z")
Assuming your badge relation status is a ‘SINGLE’ relation… add a lookup column via badge relation status and retrieve the badge image The fields component doesn’t support images but there are plenty of other components that do. Use your new lookup column in one of those and that should work ---
**Author:** ![ckinross](https://avatars.discourse-cdn.com/v4/letter/c/3ab097/32.png) [@ckinross](https://community.glideapps.com/u/ckinross)\ **Post date:** [December 18, 2023, 9:06pm UTC](https://community.glideapps.com/t/display-image-based-on-status/68823/3 "2023-12-18T21:06:56Z")
We are definitely getting closer…that worked! Thank you The new challenge is that I have 10 badges. After using the LookUp column to display the badge in either full color (earned) or greyed out (not yet earned), all of the badges are identical to the first one. Do you recommend a type of query to have each of the 10 badges uniquely match their earn status? An example would be appreciated. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [December 18, 2023, 11:46pm UTC](https://community.glideapps.com/t/display-image-based-on-status/68823/4 "2023-12-18T23:46:53Z")
> [@ckinross](#): > > The new challenge is that I have 10 badges. After using the LookUp column to display the badge in either full color (earned) or greyed out (not yet earned), all of the badges are identical to the first one. I’m not sure I understand this. As long as your ITE column returns the right number to later on be used in the relation, I assume it would work? ---
**Author:** ![ckinross](https://avatars.discourse-cdn.com/v4/letter/c/3ab097/32.png) [@ckinross](https://community.glideapps.com/u/ckinross)\ **Post date:** [December 19, 2023, 12:29am UTC](https://community.glideapps.com/t/display-image-based-on-status/68823/5 "2023-12-19T00:29:43Z")
It works in the Data Editor. The columns are pulling in the correct badge. I’m missing something about how to inform the Builder on which image to choose. Currently, the Badges collection shows the default list of all possible badges from the ‘Badges’ sheet. ![Screenshot 2023-12-18 at 4.13.20 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/1/717c0edd5c68492c61c8e7fa03620b01c11d7a7f.jpeg) In the data, I have a Template column that joins the rows (from the Badges sheet) that are associated with the appropriate badges. Ex: if something is true, then pull row 1. If that thing is false, pull the data from row 18. How do I point the ‘Image’ field within the Grid collection component to the Template column that contains the correct images? Background images that may be helpful include: Badges sheet ![Screenshot 2023-12-18 at 4.23.27 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/0/e0c6bd0c90e35c497cf03f0f71bc1ac69186dddb.png) This is being built using two initial badges with a status. Once this works, I will build out columns for the other badges. Template column to join ITE columns for two badges ![Screenshot 2023-12-18 at 4.24.09 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/4/d49b1acc520e22b713f6adbde4dba1fd1f80074d.png) An example of an ITE that the previous screen shot pointed to is shown below. The number “2” or “19” in these examples corresponds to a badge row in the Badges sheet. ![Screenshot 2023-12-18 at 4.25.52 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/b/cb009d371a06b8249cdfbbf5f6e2bef7301eec21.png) I tried several variations on how to get this to work. Some of these columns might be helpful even though they aren’t currently being used. You can see these columns are pulling in the correct images. I’ll delete anything not needed once we get a working system. Since I want to show a Badge Name, Badge Description, and an image (full color when earned or grey when not yet earned)…I’m stuck somewhere. ![Screenshot 2023-12-18 at 4.26.55 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/b/fb711f507b3cd6c7a70675152450dd55b358fed9.png) ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [December 19, 2023, 1:04am UTC](https://community.glideapps.com/t/display-image-based-on-status/68823/6 "2023-12-19T01:04:53Z")
Without studying this thread too thoroughly, I think what you ultimately need is a comma delimited list of all earned and unearned badges for each user. Then used a split text column to split it into an array. Finally create a relation linking that array to the badge table. Then you can display the collection for each user sourced from the relation. ---
**Author:** ![ckinross](https://avatars.discourse-cdn.com/v4/letter/c/3ab097/32.png) [@ckinross](https://community.glideapps.com/u/ckinross)\ **Post date:** [December 19, 2023, 3:50am UTC](https://community.glideapps.com/t/display-image-based-on-status/68823/7 "2023-12-19T03:50:57Z")
this also seems really close but something is off. Here is what works ✅have a comma delimited list of all earned and unearned badges ✅have a split text column that splits it into an array ✅have a relation linking the array to the badge table ![Screenshot 2023-12-18 at 7.48.35 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/9/39d3d22ee06d536b1cdb1c7533eafee753e06432.png) ![Screenshot 2023-12-18 at 7.48.25 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/5/05c19bc4cb9073e7e42bf4c5d10b040f9efaf229.png) the relation column (the final check mark) does not appear in the drop down list for ‘Image’ in the grid collection component. I tried using the User table as the data source and also the Badges table as the source of the collection. Neither offered the relation column. The relation column should appear just under the ‘Array Badges’ option in the dropdown. ![Screenshot 2023-12-18 at 7.49.21 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/e/2efc43b701f1c0d4d39f1c5a68fbf5190f708ec9.png) May I ask for ideas on what I am missing? ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [December 19, 2023, 4:08am UTC](https://community.glideapps.com/t/display-image-based-on-status/68823/8 "2023-12-19T04:08:09Z")
> [@ckinross](#): > > I tried using the User table as the data source and also the Badges table as the source of the collection. I haven’t read this entire thread, but shouldn’t you be using the multiple relation column as the source of the collection? ---
**Author:** ![ckinross](https://avatars.discourse-cdn.com/v4/letter/c/3ab097/32.png) [@ckinross](https://community.glideapps.com/u/ckinross)\ **Post date:** [December 19, 2023, 4:57am UTC](https://community.glideapps.com/t/display-image-based-on-status/68823/9 "2023-12-19T04:57:26Z")
At this point, I have created so many column types and tested so many options that I no longer trust my own eyes 🙂 For the source, I can point to a sheet. Where do I point to a specific column? ![Screenshot 2023-12-18 at 8.55.15 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/9/193fee1b22b7a527501811693f2880e848312f3d.png) The relation column does not appear as an option for the image within the component. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [December 19, 2023, 5:00am UTC](https://community.glideapps.com/t/display-image-based-on-status/68823/10 "2023-12-19T05:00:46Z")
If your screen is attached to the same table, then it should be an available choice. Open the Source list and scroll all the way to the bottom. ---
**Author:** ![ckinross](https://avatars.discourse-cdn.com/v4/letter/c/3ab097/32.png) [@ckinross](https://community.glideapps.com/u/ckinross)\ **Post date:** [December 19, 2023, 5:04am UTC](https://community.glideapps.com/t/display-image-based-on-status/68823/11 "2023-12-19T05:04:56Z")
I am literally crying with laughter. You solved it! Thank you to you and the entire community. It took a village to help me with this one. Kindest regards ---
**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\ **Post date:** [December 26, 2023, 5:05am UTC](https://community.glideapps.com/t/display-image-based-on-status/68823/12 "2023-12-26T05:05:00Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.