Link to the example: https://creator.celestory.io/project/AKyvPs656

Image variables are variables that allow you to store images. You can store an image as a project file or as a URL (direct link).

To create an image variable, go to the **main menu** (blue button at the top left) and then to **Variables**

![](https://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBclVGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9d1a90b47b1a9c1a37a4f45bbdbdf6127baa1fa8/2021-05-31-123012-celestory-cr_ae5bkl.png)

Then click on **Add a variable** !

![](https://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBcklGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--52e5fc4f6f77124b9c76574cd84fe0f68ed78221/2021-05-31-122559-celestory-cr_1j01q2y.png)

In the **Variable Type** drop-down menu, choose Image then enter the desired name and press **Add** !

![](https://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBck1GIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--8c1994257bb2a1d84c781b4fed4e08fd90187cd1/2021-05-31-122630-celestory-cr_tm0900.png)

Here you can choose which image to store in your variable by clicking on **Choose Image** for a project file and using the **Url** field to indicate a direct link to an image

![](https://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBclFGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--dbac6b28701b33b4bbebfef3146575436ab848ad/2021-05-31-122658-greenshot_2mfmlw.png)

For the example, we add a URL of an image, in this case, the Celestory logo.

![](https://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBcllGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--093649d9538519b40b9451b4fff10e90774caac9/2021-05-31-140513-celestory-cr_tn88wz.png)

After creating a menu that has our image variable as a layout element (like in the example project), we press the **Play Button**.
We can then see that the image is displayed.

![](https://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBajRHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e498cf6f79fccb4f743b36f4a837cd70195037ef/play-url_1w8tkqq.png)

You can also assign a URL from the graph as shown in the example project

![](https://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBa01HIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c138c3feae220cc7f7a336edb9d55c49a44e7c97/screen-assignation_1rbsitj.png)

Now you know how to use image variables.