# Choice component with images

**URL:** <https://community.glideapps.com/t/choice-component-with-images/10901>\
**Category:** Feature Requests\
**Created:** [June 15, 2020, 1:20pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901 "2020-06-15T13:20:48Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Swellart](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/swellart/32/6118_2.png) [@Swellart](https://community.glideapps.com/u/Swellart)\
**Post date:** [June 15, 2020, 1:20pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/1 "2020-06-15T13:20:48Z")

</div>

It would be great to be able to display the choices as an image in the Choice component or to have an action similar to the Choice component in Images and Tiles.  
In this case, we could write the data in the sheet by tapping the image

---

<div class="post-metadata">

**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:** [June 15, 2020, 1:24pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/2 "2020-06-15T13:24:48Z")

</div>

What is your specific use case for this, may I ask?

---

<div class="post-metadata">

**Author:** ![Naos\_Wilbrink](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/naos_wilbrink/32/769_2.png) [@Naos\_Wilbrink](https://community.glideapps.com/u/Naos_Wilbrink)\
**Post date:** [June 15, 2020, 2:58pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/3 "2020-06-15T14:58:04Z")

</div>

> [@Swellart](#):
>
> It would be great to be able to display the choices as an image in the Choice component or to have an action similar to the Choice component in Images and Tiles.

100% agree!  
I have a use case. I’m enrolled in 4 challenges. In order to change the value in my userprofile Active\_Challenge I place a ChallengeKey in Active\_Challenge. I take this from a collection of challenges, however people don’t really recognise the “name” of a challenge they need more info. The tiles / img action would be awesome.

---

<div class="post-metadata">

**Author:** ![Naos\_Wilbrink](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/naos_wilbrink/32/769_2.png) [@Naos\_Wilbrink](https://community.glideapps.com/u/Naos_Wilbrink)\
**Post date:** [June 15, 2020, 2:59pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/4 "2020-06-15T14:59:17Z")

</div>

I talked about it here as well: [Update Relation based on Collection choice (not a choice component)](https://community.glideapps.com/t/update-relation-based-on-collection-choice-not-a-choice-component/10462/4)

---

<div class="post-metadata">

**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:** [June 15, 2020, 3:15pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/5 "2020-06-15T15:15:12Z")

</div>

Just a wild idea I don’t know if it can be done, but here’s my 2 cents.

- Display images of the choices.
- Behind each image is an increment button that links to a user-specific choice column.
- Once user have clicked on an image, the increment leads to the chosen image being “grayed out”. This can be done using Cloudinary and an If \> Then \> Else. (For good UX)
- Somehow write the choices to your destination sheet using a form with “Column” values.

---

<div class="post-metadata">

**Author:** ![Naos\_Wilbrink](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/naos_wilbrink/32/769_2.png) [@Naos\_Wilbrink](https://community.glideapps.com/u/Naos_Wilbrink)\
**Post date:** [June 15, 2020, 3:18pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/6 "2020-06-15T15:18:01Z")

</div>

> [@ThinhDinh](#):
>
> Somehow write the choices to your destination sheet using a form with “Column” values.

It’s that magical last step that has been blocking me.  
If I could access the user-specific value that would be awesome and I’d be solved. I’ve also tried a solution using ZAPIER,… but that’s way to slow. (I does work though)

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [June 15, 2020, 3:58pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/7 "2020-06-15T15:58:47Z")

</div>

Well, my best idea to solve it was doing this:

![Choices gif](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/3/30c10f8c7ed75b7934fc729379ce1f4a94b43838.gif)

It’s another way to carry out the @ThinhDinh 's idea. At least, you have 3 cents now  
@Naos_Wilbrink😀

Saludos

---

<div class="post-metadata">

**Author:** ![Naos\_Wilbrink](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/naos_wilbrink/32/769_2.png) [@Naos\_Wilbrink](https://community.glideapps.com/u/Naos_Wilbrink)\
**Post date:** [June 15, 2020, 4:08pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/8 "2020-06-15T16:08:04Z")

</div>

Yeah that’s the only way to do it now,…  
Guess this topic was about how to do it differently than that.

---

<div class="post-metadata">

**Author:** ![Swellart](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/swellart/32/6118_2.png) [@Swellart](https://community.glideapps.com/u/Swellart)\
**Post date:** [June 15, 2020, 8:48pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/9 "2020-06-15T20:48:22Z")

</div>

There are so many possible use cases from different games to e-commerce!  
In my specific case (e-commerce), I would like to offer the buyer a number of additional products right in the cart. It’s like the “last-minute purchase” in front of the cash register in a regular supermarket.  
Or, in another section of our application, we have a block of online orders for restaurants, and we could provide the client with the opportunity to choose some toppings and sauces from simple “talking” images instead of boring lines of text.  
From a UX perspective, every time I can change text to an image, I would like to do this.

It would also be nice if, depending on the settings, you could choose not only a single choice but multiple options as well.  
Let’s say you have a gallery of images from columns 1,2,3 and in the same order, you could write data to a range of columns …

---

<div class="post-metadata">

**Author:** ![GioRinaldi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/giorinaldi/32/11069_2.png) [@GioRinaldi](https://community.glideapps.com/u/GioRinaldi)\
**Post date:** [August 2, 2020, 8:36am UTC](https://community.glideapps.com/t/choice-component-with-images/10901/10 "2020-08-02T08:36:14Z")

</div>

Wow interesting.  
How does it work?  
I am building an app and I would like users can upload their avatar or choose from a selection of images provided by the app.  
Thanks

Gio

---

<div class="post-metadata">

**Author:** ![Sandro\_Brito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sandro_brito/32/552_2.png) [@Sandro\_Brito](https://community.glideapps.com/u/Sandro_Brito)\
**Post date:** [August 3, 2020, 11:07am UTC](https://community.glideapps.com/t/choice-component-with-images/10901/11 "2020-08-03T11:07:26Z")

</div>

Can you do this inside a form?

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [August 3, 2020, 4:06pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/12 "2020-08-03T16:06:54Z")

</div>

Hola @Sandro_Brito, unfortunately a dynamic relation doesn’t work in a Form.

You can do it outside and later, when all choices/data is collected, write it to GS by using a Form, it´s the workaround so far.

@GioRinaldi , the logo is showed based on the user selection so, I’m using a relation/lookup to find the right logo dynamically.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/a/a25b7160e6312ea7892cbde1fa45f9d8fa1bcfc3.png)

Saludos

---

<div class="post-metadata">

**Author:** ![Sandro\_Brito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sandro_brito/32/552_2.png) [@Sandro\_Brito](https://community.glideapps.com/u/Sandro_Brito)\
**Post date:** [August 3, 2020, 4:26pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/13 "2020-08-03T16:26:24Z")

</div>

Thank you. This is why we need the choice component to be at least like the list components.

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [August 4, 2020, 9:42pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/14 "2020-08-04T21:42:45Z")

</div>

@Naos_Wilbrink would the image selection shown in the first tab (Single images) of this app help to bring you closer to a solution?

> **[Upload to Cloudinary multiple images](https://multiupload.glideapp.io)**

From this thread:

> [@Upload multiple images to Cloudinary](https://community.glideapps.com/t/upload-multiple-images-to-cloudinary-now-with-presentation-video/13524):
>
> Intro I thought I was going to publish my first app in the Template store but external sources like Cloudinary integration are not allowed in a template. So after hours spend you will instead see the app here. Upload multiple images to Cloudinary Try out version: URL: [https://multiupload.glideapp.io/](https://multiupload.glideapp.io/) The app is using my personal Cloudinary account - so please keep uploads in the app low - and use your own Cloudinary account if you are going to do exploration of cloudinary Backg…

---

<div class="post-metadata">

**Author:** ![Naos\_Wilbrink](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/naos_wilbrink/32/769_2.png) [@Naos\_Wilbrink](https://community.glideapps.com/u/Naos_Wilbrink)\
**Post date:** [August 17, 2020, 2:44pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/15 "2020-08-17T14:44:46Z")

</div>

Hi Krivo! That looks pretty cool! What component did you use?

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [August 17, 2020, 3:45pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/16 "2020-08-17T15:45:11Z")

</div>

@Naos_Wilbrink well just two inline lists with increment action. I made a template app which can be found in the mentioned thread if you want to look under the hood. There is a fair bit of things going on in order to make the increments work. Have a look if you like 😀

---

<div class="post-metadata">

**Author:** ![Keith\_Chikumbirike](https://avatars.discourse-cdn.com/v4/letter/k/5daacb/32.png) [@Keith\_Chikumbirike](https://community.glideapps.com/u/Keith_Chikumbirike)\
**Post date:** [October 7, 2020, 11:38am UTC](https://community.glideapps.com/t/choice-component-with-images/10901/17 "2020-10-07T11:38:25Z")

</div>

Definitely would be awesome!

---

<div class="post-metadata">

**Author:** ![Keith\_Chikumbirike](https://avatars.discourse-cdn.com/v4/letter/k/5daacb/32.png) [@Keith\_Chikumbirike](https://community.glideapps.com/u/Keith_Chikumbirike)\
**Post date:** [October 7, 2020, 12:00pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/18 "2020-10-07T12:00:39Z")

</div>

Thanks , nice  
How does this work?

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [October 7, 2020, 12:09pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/19 "2020-10-07T12:09:02Z")

</div>

Yep! I do this here:

> [@Coming Soon: Reserve a Room w/ Recurring Daily, Weekly & Monthly Events](https://community.glideapps.com/t/coming-soon-reserve-a-room-w-recurring-daily-weekly-monthly-events/16661):
>
> wave Hi all! Just wanted to share a template I’ve been working on the past day or so: Room Reservations. HUGE thank you to @Lucas_Pires whose design UI skills are off the chains. Take a look and would love your feedback:

and here

> [@Multirow Choice Component (aka Chips UI)](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/69):
>
> Love it! Here’s what I did to avoid a form button:

Not as easy as a simple choice component, but gets the job done!

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [October 7, 2020, 2:22pm UTC](https://community.glideapps.com/t/choice-component-with-images/10901/20 "2020-10-07T14:22:36Z")

</div>

Great idea Robert, I was thinking about it 2 days ago but I couldn’t find the way to know which was the latest changed item. Now watching your video I see my missing piece: the maximum value using a rollup!

Te odio Robert! 🤣

[Next page](https://community.glideapps.com/t/choice-component-with-images/10901.md?page=2)
