# Variables

To make contents editable in the backoffice of the site, we use variables.

Variables are defined by theme and type and are composed of: key / label / type and options

The type defines how the variable will appear in the backoffice and will display the appropriate input for the user. The main types of variables are: text / html / image / link/ document / select

The options are:

* Sensitive to multi language (translated or not)
* Dependency to another variable to hide/display in the backoffice based on another variable content.
* Default value
* Enabled or not in the visual editor

```markup
<section class="main-section">
    <h1> #$variable|title$# </h1>
    <h2> #$variable|subtitle$# </h2> 
    
    <p> #$variable|description$# </p>
    <a href="#$variable|url$#" #$variable|url.target$#>__@@Learn More@@__</a> 
</section>

```

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-Lx1vqIShYQHjf6wplpa%2F-Lx5m2P_z3xeZyFXAsCL%2FCapture%20d%E2%80%99e%CC%81cran%202019-12-27%20a%CC%80%2010.54.24.png?alt=media\&token=fd295180-7701-43a4-9b4a-c141c6452686)

After added needed variables into your template, they will be editable in the Tester area of the backoffice. You'll be able to select a type for the variable (ex: Image, Link, WYSIWYG, Switch, Select), to choose it's default content, to rename it, to switch translatable property option of the variable etc.&#x20;

{% hint style="info" %}
**Some variable type are deprecated: Document & Internal Link**
{% endhint %}

## Type of variables

By default, all variables are "simple" variable, just simple input tags.

### Simple

![CMS variable type image](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-LzIRNHA4hfEXk6OiT9i%2F-LzIRflv0WiSxYdAfo-E%2Fsimple.png?alt=media\&token=39155d11-3c20-4981-9e8a-ead140bbcf81)

### WYSIWYG

![CMS variable type WYSIWYG](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-LzIRNHA4hfEXk6OiT9i%2F-LzIRlyw2S7_eJ_wOnBd%2Fwysiwyg.png?alt=media\&token=98a7cd54-312d-4a93-975f-63f56114e6a0)

### Image

Here is how the image will be visible in the BO

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-LzIRNHA4hfEXk6OiT9i%2F-LzIRzNiZ2IGij2g0psj%2Fimage.png?alt=media\&token=09833acc-96d8-4018-80fa-9ff356fcf65e)

```markup
<img src="#$variable|my-image$#" alt="#$variable|my-image.alt$#">
```

For more informations, go to the section [Images](https://galaxy-cms.gitbook.io/project/photos-videos/images#cms-images).

### Link

When creating a variable of type "link", it will allow the user to choose between "External link", "Internal link", "Galaxy link", "Phone", "Email", "Document" (or no link).

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-LzIRNHA4hfEXk6OiT9i%2F-LzITBg22zutLI7VBINn%2Flink-full.png?alt=media\&token=f49e1977-8be2-4df3-9b31-c2c94da5b03d)

```markup
<a href="#$variable|example$#" #$variable|example.target$#>CONTENT</a>
```

#### Link opening in a new tab / Link target

`#$variable|example.target$#` will be replaced by `target="_blank"` is necessary

#### Link type

{% hint style="info" %}
This will be released on production on Tuesday 5th of April 2022
{% endhint %}

`#$variable|example.type$#` will be replaced by the type of link selected in the backoffice

Are is the list of possible values

* `no_link`&#x20;
* `page` (Internal link)&#x20;
* `galaxy` (Galaxy link)&#x20;
* `url` (External link)&#x20;
* `phone` (Phone)&#x20;
* `email` (Email)&#x20;
* `document` (Document)

### CodeMirror

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-LzIUATlzzyuqOpIIINU%2F-LzIVFLgAlwaVFBy2NO_%2Fcodemirror.png?alt=media\&token=4a026345-5012-49ec-9d16-c93455008695)
