# Select from Image Grid

**URL:** <https://community.weweb.io/t/select-from-image-grid/4361>\
**Category:** How do I?\
**Created:** [September 15, 2023, 6:47am UTC](https://community.weweb.io/t/select-from-image-grid/4361 "2023-09-15T06:47:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![LarsL](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@LarsL](https://community.weweb.io/u/LarsL)\
**Post date:** [September 15, 2023, 6:47am UTC](https://community.weweb.io/t/select-from-image-grid/4361/1 "2023-09-15T06:47:02Z")

</div>

I am trying to create a Grid with Images that are live-fed from an API response,

Let’s say I am getting 4 images, I place them in a grid and show them.

The user is supposed to select one of them, which will then be used like a selection for further processing. It’s basically part of a form.

How could I achieve that?

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [September 15, 2023, 7:55am UTC](https://community.weweb.io/t/select-from-image-grid/4361/2 "2023-09-15T07:55:20Z")

</div>

Are you using a backend or just the API?

---

<div class="post-metadata">

**Author:** ![LarsL](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@LarsL](https://community.weweb.io/u/LarsL)\
**Post date:** [September 15, 2023, 8:19am UTC](https://community.weweb.io/t/select-from-image-grid/4361/3 "2023-09-15T08:19:22Z")

</div>

I will be storing it after. So at that stage they are coming from the API directly.  
But stored as values, obviously.

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [September 15, 2023, 8:34am UTC](https://community.weweb.io/t/select-from-image-grid/4361/4 "2023-09-15T08:34:27Z")

</div>

Then you gotta make your call to the api via rest api plugin and get urls back, then set them as items in a div/grid and set their source via bind to the url

---

<div class="post-metadata">

**Author:** ![LarsL](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@LarsL](https://community.weweb.io/u/LarsL)\
**Post date:** [September 15, 2023, 8:36am UTC](https://community.weweb.io/t/select-from-image-grid/4361/5 "2023-09-15T08:36:40Z")

</div>

100% agreed.

The issue is how I make them selectable for further processing.

I am playing with the idea of adding a listener that stores the selected img src to a variable and then I can simply use it.

Would that make sense? or is there a more straight forward approach?

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [September 15, 2023, 10:14am UTC](https://community.weweb.io/t/select-from-image-grid/4361/6 "2023-09-15T10:14:23Z")

</div>

I would need to know what you want to do next with them, send it to the backend? Fill some more infos?

---

<div class="post-metadata">

**Author:** ![LarsL](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@LarsL](https://community.weweb.io/u/LarsL)\
**Post date:** [September 15, 2023, 10:16am UTC](https://community.weweb.io/t/select-from-image-grid/4361/7 "2023-09-15T10:16:07Z")

</div>

Both, they will be used for a checkout process and also stored to the backend.

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [September 15, 2023, 10:48am UTC](https://community.weweb.io/t/select-from-image-grid/4361/8 "2023-09-15T10:48:01Z")

</div>

I’d go for a variable then. Depending on where you want to upload it, it might make sense to also upload it right away before checkout and delete it if not checked out, so you can restore the checkout process later.
