# Update image inside collection popup

**URL:** https://community.weweb.io/t/update-image-inside-collection-popup/158
**Category:** Ask us anything
**Tags:** binding, popup
**Created:** [January 5, 2022, 11:32pm UTC](https://community.weweb.io/t/update-image-inside-collection-popup/158 "2022-01-05T23:32:36Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![sofiane](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sofiane](https://community.weweb.io/u/sofiane)
#### Post date: [January 5, 2022, 11:32pm UTC](https://community.weweb.io/t/update-image-inside-collection-popup/158/1 "2022-01-05T23:32:36Z")

</div>

Hi Weweb folks !

Thank you for this wonderful life hack that you are building!

I would love to know how to :

- Update from a collection the image that’s inside a popup (which is also generated from a collection).

As you can see I’ve set the thing correctly (I hope so 😅 ) but when I change to another popup the same image appears!

 ![Screenshot from 2022-01-05 23-25-52](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/837fb7a71bcedee73a664ff5e5012fa3d9cddf74.png)

Thank you very much!

Peace 🖖

---

<div class="post-metadata">

### Author: ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)
#### Post date: [January 6, 2022, 9:25am UTC](https://community.weweb.io/t/update-image-inside-collection-popup/158/2 "2022-01-06T09:25:58Z")

</div>

Hi Sofiane! Glad you’re enjoying WeWeb! 🙂

Could you share a link to the editor so I can check it out?

---

<div class="post-metadata">

### Author: ![sofiane](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sofiane](https://community.weweb.io/u/sofiane)
#### Post date: [January 6, 2022, 9:58am UTC](https://community.weweb.io/t/update-image-inside-collection-popup/158/3 "2022-01-06T09:58:59Z")

</div>

Good Morning Joyce 😁

Something like this ?

> **[WeWeb Editor](https://editor.weweb.io/7f6bba68-06bc-42fe-832a-7f6e88b6ed0e)**
>
> WeWeb Editor

Thanks for your reactivity! 💟

---

<div class="post-metadata">

### Author: ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)
#### Post date: [January 6, 2022, 3:44pm UTC](https://community.weweb.io/t/update-image-inside-collection-popup/158/4 "2022-01-06T15:44:50Z")

</div>

Hi Sofiane!

Just had a look in the editor and added a “Services test” page where you can see the image update correctly depending on the service that was clicked on.

Will share screenshots and explanations shortly 🙂

---

<div class="post-metadata">

### Author: ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)
#### Post date: [January 6, 2022, 3:57pm UTC](https://community.weweb.io/t/update-image-inside-collection-popup/158/5 "2022-01-06T15:57:28Z")

</div>

# Step 1 – Create an Empty Variable

The first thing I did is create an empty variable called selectedService:

 ![Screen Shot 2022-01-06 at 16.46.16](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/5f60018c9e4dde1f547ab2eb6da7f306b3669c75.png)

The variable type is an object because we will want to add all the information from the item we select.

We leave it empty by default because no service is selected by default.

# Step 2 – Create a Workflow to Add Information to the Variable Based on the Selected Item

The second thing I did is create a workflow called Select Service on the icon that the user can click on to make the popup appear.

 ![Screen Shot 2022-01-06 at 16.47.30](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/f7e663e5915ff9ea75b6581ada5e13f11d4e2d8b.png)

The trigger is On Click because the workflow starts when the user clicks on the icon.

The variable we want to change is the selectedService variable (which is empty by default).

We want the whole data from the selected item to be the new value of this selectedService variable.

# Bind the Image to the selectedService Variable

Finally, in the popup, we bound the image to our selectedService variable that includes all the information from the selectedService.

 ![Screen Shot 2022-01-06 at 16.54.41](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/0eec53923dcddb1676c61eb2b6e74438ca7ff7b8.png)

The tricky part was to find where the image URL was stored in the variable and it turns out it’s the third item in variable, so index 2 in code speak.

Ok, I hope that helped! It was fun looking! 😀

If anything is unclear or doesn’t work as intended, don’t hesitate to let us know!! 🙂

---

<div class="post-metadata">

### Author: ![sofiane](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sofiane](https://community.weweb.io/u/sofiane)
#### Post date: [January 6, 2022, 4:03pm UTC](https://community.weweb.io/t/update-image-inside-collection-popup/158/6 "2022-01-06T16:03:27Z")

</div>

🤯

You are a gem Joyce ! Brilliant !

Thank you very much, it’s crystal clear.

😍
