# Composer

### Add the composer to a page template

{% hint style="info" %}
You can only have **one** composer per page
{% endhint %}

Simply add to the page template this syntax

```html
#$custom$#
```

This syntax will be replaced by the blocks selected by the user in the backoffice

Example:

{% code title="page/free-content.html" lineNumbers="true" %}

```html
<div id="main-content" role="main">
  #$list|hero$#
  <div id="site-content">
    #$custom$#
  </div>
</div>
```

{% endcode %}

On `free-content` page template, the content of the composer will be added where you have `#$custom$#`

### Show a block in the composer

To allow a block to be picked in the composer, in Testeur edit the block and check "**Is in composer**"

{% hint style="info" %}
When adding a block in the composer, try to check it works if added to any page, if re-ordering the block will not cause a code issue, etc...\
\
You can choose to add to the composer block that should not be added everywhere, but please warn the project managers. Indeed, the block will be accessible from any page, with a composer
{% endhint %}

#### Add screenshot to block / list

On the composer "Add block" modal, the user can see a screenshot of the blocks.\
This is also useful for pages to have a preview.

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-Lcjv-Hb7escQSGslEk-%2F-LcjvIO5tJl9CBVcJZEe%2FCapture%20d%E2%80%99e%CC%81cran%202019-04-18%20a%CC%80%2012.10.20.png?alt=media\&token=2c0f80d0-c7f6-4204-b67b-58e2555c45d8)

This needs to be defined at theme level, you have a folder `screen` where you can upload the images. For blocks, upload them in `screen/block/key.png` and for lists `screen/block/key.png` , with `key` being the name of your block (in the code).

![Example for tc-theme](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-Lcjv-Hb7escQSGslEk-%2F-Lcjvj4KkO2aE9YHSIuw%2FCapture%20d%E2%80%99e%CC%81cran%202019-04-18%20a%CC%80%2012.12.20.png?alt=media\&token=0fbaf504-834f-40d2-8d48-3bdbb83c7801)

If you are not sure where to upload your image, you can look inside **Tester** where to add it

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-Lcjv-Hb7escQSGslEk-%2F-LcjwZwgbXcuTMcWfSs6%2FCapture%20d%E2%80%99e%CC%81cran%202019-04-18%20a%CC%80%2012.15.37.png?alt=media\&token=6141d9e9-dd22-4512-93ae-577cbba005f1)

### Default blocks in the Composer

{% content-ref url="composer/default-composer" %}
[default-composer](https://galaxy-cms.gitbook.io/project/cms/composer/default-composer)
{% endcontent-ref %}
