Repository: chili-publish/grafx-documentation
Pull request #538: [GraFx Studio] Image variable (including uploads)
Author: login: BramVerniest
Created: 2025-05-30T12:29:41Z | Merged: 2025-05-30T14:59:14Z



Diff:
diff --git a/docs/GraFx-Studio/guides/template-variables-private-date/index.md b/docs/GraFx-Studio/guides/template-variables-private-data/index.md
similarity index 100%
rename from docs/GraFx-Studio/guides/template-variables-private-date/index.md
rename to docs/GraFx-Studio/guides/template-variables-private-data/index.md
diff --git a/docs/GraFx-Studio/guides/template-variables-private-date/private-data01.png b/docs/GraFx-Studio/guides/template-variables-private-data/private-data01.png
similarity index 100%
rename from docs/GraFx-Studio/guides/template-variables-private-date/private-data01.png
rename to docs/GraFx-Studio/guides/template-variables-private-data/private-data01.png
diff --git a/docs/GraFx-Studio/guides/template-variables/assign/index.md b/docs/GraFx-Studio/guides/template-variables/assign/index.md
index a7bb35dd..bc3e5777 100644
--- a/docs/GraFx-Studio/guides/template-variables/assign/index.md
+++ b/docs/GraFx-Studio/guides/template-variables/assign/index.md
@@ -34,19 +34,4 @@ In edit mode, the template variable name is shown in a gray box in the text.
 
 If the frame is not wide enough to show the full name, the name will be truncated to avoid overflow.
 
-![screenshot-full](variables-3.png)
-
-
-## Assign template variable to image frame
-
-Select the image frame you want to assign the template variable to.
-
-In the variable tab, choose the image variable from the "Insert variable" drop-down menu.
-
-![screenshot-full](assign.png)
-
-## Un-assign a template variable from an image frame
-
-To remove the template variable from the image frame, select the frame and choose "None" from the "Insert variable" drop-down menu.
-
-![screenshot-full](unassign.png)
\ No newline at end of file
+![screenshot-full](variables-3.png)
\ No newline at end of file
diff --git a/docs/GraFx-Studio/guides/template-variables/assign/assign.png b/docs/GraFx-Studio/guides/template-variables/image/assign.png
similarity index 100%
rename from docs/GraFx-Studio/guides/template-variables/assign/assign.png
rename to docs/GraFx-Studio/guides/template-variables/image/assign.png
diff --git a/docs/GraFx-Studio/guides/template-variables/image/image01.png b/docs/GraFx-Studio/guides/template-variables/image/image01.png
new file mode 100644
index 00000000..26f2d4fc
Binary files /dev/null and b/docs/GraFx-Studio/guides/template-variables/image/image01.png differ
diff --git a/docs/GraFx-Studio/guides/template-variables/image/image02.png b/docs/GraFx-Studio/guides/template-variables/image/image02.png
new file mode 100644
index 00000000..56d4c05b
Binary files /dev/null and b/docs/GraFx-Studio/guides/template-variables/image/image02.png differ
diff --git a/docs/GraFx-Studio/guides/template-variables/image/image03.png b/docs/GraFx-Studio/guides/template-variables/image/image03.png
new file mode 100644
index 00000000..95912c29
Binary files /dev/null and b/docs/GraFx-Studio/guides/template-variables/image/image03.png differ
diff --git a/docs/GraFx-Studio/guides/template-variables/image/image04.png b/docs/GraFx-Studio/guides/template-variables/image/image04.png
new file mode 100644
index 00000000..214b1aa4
Binary files /dev/null and b/docs/GraFx-Studio/guides/template-variables/image/image04.png differ
diff --git a/docs/GraFx-Studio/guides/template-variables/image/image05.png b/docs/GraFx-Studio/guides/template-variables/image/image05.png
new file mode 100644
index 00000000..d1406c9b
Binary files /dev/null and b/docs/GraFx-Studio/guides/template-variables/image/image05.png differ
diff --git a/docs/GraFx-Studio/guides/template-variables/image/image06.png b/docs/GraFx-Studio/guides/template-variables/image/image06.png
new file mode 100644
index 00000000..c370e7b0
Binary files /dev/null and b/docs/GraFx-Studio/guides/template-variables/image/image06.png differ
diff --git a/docs/GraFx-Studio/guides/template-variables/image/image07.png b/docs/GraFx-Studio/guides/template-variables/image/image07.png
new file mode 100644
index 00000000..66107fe3
Binary files /dev/null and b/docs/GraFx-Studio/guides/template-variables/image/image07.png differ
diff --git a/docs/GraFx-Studio/guides/template-variables/image/index.md b/docs/GraFx-Studio/guides/template-variables/image/index.md
new file mode 100644
index 00000000..3109be5a
--- /dev/null
+++ b/docs/GraFx-Studio/guides/template-variables/image/index.md
@@ -0,0 +1,68 @@
+# How to work with image variables
+
+## Feature Channel
+
+<iframe width="690" height="388" src="https://www.youtube.com/embed/pP6_3Ej6x-U?si=yiwTweBam4j7zLRD&controls=1&mute=1&showinfo=0&rel=0&autoplay=0&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+[Go to YouTube to see all feature videos](https://www.youtube.com/playlist?list=PLLHtQ1R6R-B_m7XAVySM9OjbbUscsgBOH)
+
+## Create an Image Variable
+
+### The Basics
+
+Create a variable, and change the type to "Image" (default will be Single-line text)
+
+![screenshot](image01.png)
+
+Optional: Choose a default image.
+
+![screenshot-full](image02.png)
+
+Optional: set the variable to be required and add [private data](/GraFx-Studio/guides/template-variables-private-data/).
+
+![screenshot-full](image03.png)
+
+### User Interface Settings
+
+In the **User Interface** settings, define the **Label**, **Placeholder**, **Help text** and [Visibility](/GraFx-Studio/guides/template-variables/visibility/).  
+
+![screenshot-full](image04.png)
+
+### Connector Settings
+
+!!! warning "GraFx Media"
+    The information below works for the (default) GraFx Media connector.
+    For settings specific to another Media Connector, please consult the documentation page for this connector.
+    
+    GraFx Media uses the concept of folders, other Media Connectors might use different terminology.
+
+Set the path, where the end-user can browse for images.
+
+The path can be fixed: **Set Value** or fed through a (text / list) variable having a path.
+
+![screenshot-full](image05.png)
+
+Choose "Allow Upload" and set a path, to allow end-users to upload assets.
+
+For uploads, you can define a minimum width and height in pixels.
+
+Once enabled, each uploaded file is stored in the "Upload/" folder (for the GraFx Media connector), or in a custom path you specify.  
+Uploaded assets become available just like any other image variable source.
+
+![screenshot-full](image06.png)
+
+## Assign image variable to image frame
+
+Select the image frame you want to assign the template variable to.
+
+In the variable tab, choose the image variable from the "Insert variable" drop-down menu.
+
+You can also open the action menu of a variable (the 3 dots) and use the "Insert" option.
+
+![screenshot-full](image07.png)
+
+## Un-assign a template variable from an image frame
+
+To remove the template variable from the image frame, select the frame and choose "None" from the "Insert variable" drop-down menu.
+
+![screenshot-full](unassign.png)
\ No newline at end of file
diff --git a/docs/GraFx-Studio/guides/template-variables/assign/unassign.png b/docs/GraFx-Studio/guides/template-variables/image/unassign.png
similarity index 100%
rename from docs/GraFx-Studio/guides/template-variables/assign/unassign.png
rename to docs/GraFx-Studio/guides/template-variables/image/unassign.png
diff --git a/mkdocs.yml b/mkdocs.yml
index b6411fd0..c85e5de9 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -289,9 +289,10 @@ nav:
             - 'Variable Visibility Conditions': 'GraFx-Studio/guides/template-variables/visibility/index.md'
             - 'Add template variables':         'GraFx-Studio/guides/template-variables/assign/index.md'
             - 'Date variables':                 'GraFx-Studio/guides/template-variables/date/index.md'
+            - 'Image variables':                'GraFx-Studio/guides/template-variables/image/index.md'
             - 'Multi-line text variables':      'GraFx-Studio/guides/template-variables/multi-line-text/index.md'
             - 'Number variables':               'GraFx-Studio/guides/template-variables/number/index.md'
-            - 'Variables private data':         'GraFx-Studio/guides/template-variables-private-date/index.md'
+            - 'Variables private data':         'GraFx-Studio/guides/template-variables-private-data/index.md'
             - 'Create Actions':                 'GraFx-Studio/guides/actions/create/index.md'
             - 'Write Actions Javascript':       'GraFx-Studio/guides/actions/javascript/index.md'
             - 'Example: Change Layout':         'GraFx-Studio/guides/actions/example-changelayout/index.md'


Reviews:
user: login: jeroencosyn
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-30T14:11:29Z
user: login: jeroencosyn
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-05-30T14:43:44Z

Review comments:
diff_hunk: @@ -0,0 +1,60 @@
+# How to work with image variables
+
+## Feature Channel
+
+<iframe width="690" height="388" src="https://www.youtube.com/embed/pP6_3Ej6x-U?si=yiwTweBam4j7zLRD&controls=1&mute=1&showinfo=0&rel=0&autoplay=0&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+[Go to YouTube to see all feature videos](https://www.youtube.com/playlist?list=PLLHtQ1R6R-B_m7XAVySM9OjbbUscsgBOH)
+
+## Create an Image Variable
+
+### The Basics
+
+Create a variable, and change the type to "Image" (default will be Single-line text)
+
+![screenshot](image01.png)
+
+Optional: Choose a default image.
+
+![screenshot-full](image02.png)
+
+Optional: set the variable to be required and add [private data](/GraFx-Studio/guides/template-variables-private-data/).
+
+![screenshot-full](image03.png)
+
+### User Interface Settings
+
+In the **User Interface** settings, define the **Label**, **Placeholder** (help text), and [Visibility](/GraFx-Studio/guides/template-variables/visibility/).  
path: docs/GraFx-Studio/guides/template-variables/image/index.md
user: login: jeroencosyn
body: Placeholder and help text are not the same. A placeholder is shown inside the component when it's empty. Help text is always shown below the component. They can have different values.
created_at: 2025-05-30T14:02:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,60 @@
+# How to work with image variables
+
+## Feature Channel
+
+<iframe width="690" height="388" src="https://www.youtube.com/embed/pP6_3Ej6x-U?si=yiwTweBam4j7zLRD&controls=1&mute=1&showinfo=0&rel=0&autoplay=0&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+[Go to YouTube to see all feature videos](https://www.youtube.com/playlist?list=PLLHtQ1R6R-B_m7XAVySM9OjbbUscsgBOH)
+
+## Create an Image Variable
+
+### The Basics
+
+Create a variable, and change the type to "Image" (default will be Single-line text)
+
+![screenshot](image01.png)
+
+Optional: Choose a default image.
+
+![screenshot-full](image02.png)
+
+Optional: set the variable to be required and add [private data](/GraFx-Studio/guides/template-variables-private-data/).
+
+![screenshot-full](image03.png)
+
+### User Interface Settings
+
+In the **User Interface** settings, define the **Label**, **Placeholder** (help text), and [Visibility](/GraFx-Studio/guides/template-variables/visibility/).  
+
+![screenshot-full](image04.png)
+
+### Connector Settings
+
+Set the path, where the end-user can browse for images.
+
+The path can be fixed: **Set Value** or fed through a (text) variable having a path.
+
+![screenshot-full](image05.png)
+
+Choose "Allow Upload" and set a path, to allow end-users to upload assets.
+
+For uploads, you can define a minimum width and height in pixels.
+
+Once enabled, each uploaded file is stored in by default in an `uploads/` folder (for the GraFx Media connector), or in a custom path you specify.  
+Uploaded assets become available just like any other image variable source.
+
+![screenshot-full](image06.png)
+
+## Assign image variable to image frame
+
+Select the image frame you want to assign the template variable to.
+
+In the variable tab, choose the image variable from the "Insert variable" drop-down menu.
path: docs/GraFx-Studio/guides/template-variables/image/index.md
user: login: jeroencosyn
body: You can also open the action menu of a variable (the 3 dots) and use the "Insert" option.
created_at: 2025-05-30T14:03:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,60 @@
+# How to work with image variables
+
+## Feature Channel
+
+<iframe width="690" height="388" src="https://www.youtube.com/embed/pP6_3Ej6x-U?si=yiwTweBam4j7zLRD&controls=1&mute=1&showinfo=0&rel=0&autoplay=0&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+[Go to YouTube to see all feature videos](https://www.youtube.com/playlist?list=PLLHtQ1R6R-B_m7XAVySM9OjbbUscsgBOH)
+
+## Create an Image Variable
+
+### The Basics
+
+Create a variable, and change the type to "Image" (default will be Single-line text)
+
+![screenshot](image01.png)
+
+Optional: Choose a default image.
+
+![screenshot-full](image02.png)
+
+Optional: set the variable to be required and add [private data](/GraFx-Studio/guides/template-variables-private-data/).
+
+![screenshot-full](image03.png)
+
+### User Interface Settings
+
+In the **User Interface** settings, define the **Label**, **Placeholder** (help text), and [Visibility](/GraFx-Studio/guides/template-variables/visibility/).  
+
+![screenshot-full](image04.png)
+
+### Connector Settings
+
+Set the path, where the end-user can browse for images.
path: docs/GraFx-Studio/guides/template-variables/image/index.md
user: login: jeroencosyn
body: The folder setting is GraFx Media specific. Other media connectors might have other settings. Maybe they don't work with folders.
I think it's useful to document the GraFx Media connector settings, but I would mention that those are for GraFx Media, other media connectors can have other settings.

Being able to allow browse OR upload (soon that will be AND/OR) is available for all media connectors (if they support it). Depending on the media connector, you will get browse/upload-specific settings. These settings can always be set to a fixed value or linked to a variable.

For upload, you indeed get the minimum dimensions settings. These are not connector-specific.
created_at: 2025-05-30T14:10:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,60 @@
+# How to work with image variables
+
+## Feature Channel
+
+<iframe width="690" height="388" src="https://www.youtube.com/embed/pP6_3Ej6x-U?si=yiwTweBam4j7zLRD&controls=1&mute=1&showinfo=0&rel=0&autoplay=0&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+[Go to YouTube to see all feature videos](https://www.youtube.com/playlist?list=PLLHtQ1R6R-B_m7XAVySM9OjbbUscsgBOH)
+
+## Create an Image Variable
+
+### The Basics
+
+Create a variable, and change the type to "Image" (default will be Single-line text)
+
+![screenshot](image01.png)
+
+Optional: Choose a default image.
+
+![screenshot-full](image02.png)
+
+Optional: set the variable to be required and add [private data](/GraFx-Studio/guides/template-variables-private-data/).
+
+![screenshot-full](image03.png)
+
+### User Interface Settings
+
+In the **User Interface** settings, define the **Label**, **Placeholder** (help text), and [Visibility](/GraFx-Studio/guides/template-variables/visibility/).  
+
+![screenshot-full](image04.png)
+
+### Connector Settings
+
+Set the path, where the end-user can browse for images.
+
+The path can be fixed: **Set Value** or fed through a (text) variable having a path.
+
+![screenshot-full](image05.png)
+
+Choose "Allow Upload" and set a path, to allow end-users to upload assets.
+
+For uploads, you can define a minimum width and height in pixels.
+
+Once enabled, each uploaded file is stored in by default in an `uploads/` folder (for the GraFx Media connector), or in a custom path you specify.  
path: docs/GraFx-Studio/guides/template-variables/image/index.md
user: login: jeroencosyn
body: The default folder is "Upload".
created_at: 2025-05-30T14:11:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,68 @@
+# How to work with image variables
+
+## Feature Channel
+
+<iframe width="690" height="388" src="https://www.youtube.com/embed/pP6_3Ej6x-U?si=yiwTweBam4j7zLRD&controls=1&mute=1&showinfo=0&rel=0&autoplay=0&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+[Go to YouTube to see all feature videos](https://www.youtube.com/playlist?list=PLLHtQ1R6R-B_m7XAVySM9OjbbUscsgBOH)
+
+## Create an Image Variable
+
+### The Basics
+
+Create a variable, and change the type to "Image" (default will be Single-line text)
+
+![screenshot](image01.png)
+
+Optional: Choose a default image.
+
+![screenshot-full](image02.png)
+
+Optional: set the variable to be required and add [private data](/GraFx-Studio/guides/template-variables-private-data/).
+
+![screenshot-full](image03.png)
+
+### User Interface Settings
+
+In the **User Interface** settings, define the **Label**, **Placeholder**, **Help text** and [Visibility](/GraFx-Studio/guides/template-variables/visibility/).  
+
+![screenshot-full](image04.png)
+
+### Connector Settings
+
+!!! warning "GraFx Media"
+    The information below works for the (default) GraFx Media connector.
+    For settings specific to another Media Connector, please consult the documentation page for this connector.
+    
+    GraFx Media uses the concept of folders, other Media Connectors might use different terminology.
+
+Set the path, where the end-user can browse for images.
+
+The path can be fixed: **Set Value** or fed through a (text) variable having a path.
path: docs/GraFx-Studio/guides/template-variables/image/index.md
user: login: jeroencosyn
body: Can be a text or list variable.
created_at: 2025-05-30T14:42:55Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,68 @@
+# How to work with image variables
+
+## Feature Channel
+
+<iframe width="690" height="388" src="https://www.youtube.com/embed/pP6_3Ej6x-U?si=yiwTweBam4j7zLRD&controls=1&mute=1&showinfo=0&rel=0&autoplay=0&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+[Go to YouTube to see all feature videos](https://www.youtube.com/playlist?list=PLLHtQ1R6R-B_m7XAVySM9OjbbUscsgBOH)
+
+## Create an Image Variable
+
+### The Basics
+
+Create a variable, and change the type to "Image" (default will be Single-line text)
+
+![screenshot](image01.png)
+
+Optional: Choose a default image.
+
+![screenshot-full](image02.png)
+
+Optional: set the variable to be required and add [private data](/GraFx-Studio/guides/template-variables-private-data/).
+
+![screenshot-full](image03.png)
+
+### User Interface Settings
+
+In the **User Interface** settings, define the **Label**, **Placeholder**, **Help text** and [Visibility](/GraFx-Studio/guides/template-variables/visibility/).  
+
+![screenshot-full](image04.png)
+
+### Connector Settings
+
+!!! warning "GraFx Media"
+    The information below works for the (default) GraFx Media connector.
+    For settings specific to another Media Connector, please consult the documentation page for this connector.
+    
+    GraFx Media uses the concept of folders, other Media Connectors might use different terminology.
+
+Set the path, where the end-user can browse for images.
+
+The path can be fixed: **Set Value** or fed through a (text) variable having a path.
+
+![screenshot-full](image05.png)
+
+Choose "Allow Upload" and set a path, to allow end-users to upload assets.
+
+For uploads, you can define a minimum width and height in pixels.
+
+Once enabled, each uploaded file is stored in by default in an `Upload/` folder (for the GraFx Media connector), or in a custom path you specify.  
path: docs/GraFx-Studio/guides/template-variables/image/index.md
user: login: jeroencosyn
body: This sentence is not correct:
"each uploaded file is stored in by default in an `Upload/` folder"
created_at: 2025-05-30T14:43:36Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-30T12:31:21Z
body: Azure Static Web Apps: Your stage site is ready! Visit it here: https://wonderful-sky-012b9bc03-538.westeurope.1.azurestaticapps.net
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-30T12:37:44Z
body: Azure Static Web Apps: Your stage site is ready! Visit it here: https://wonderful-sky-012b9bc03-538.westeurope.1.azurestaticapps.net
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-30T14:23:54Z
body: Azure Static Web Apps: Your stage site is ready! Visit it here: https://wonderful-sky-012b9bc03-538.westeurope.1.azurestaticapps.net
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-30T14:55:46Z
body: Azure Static Web Apps: Your stage site is ready! Visit it here: https://wonderful-sky-012b9bc03-538.westeurope.1.azurestaticapps.net
author_association: NONE