Skip to content

Commit

Permalink
DOC - Improve editable documentation and make twig syntax more consis…
Browse files Browse the repository at this point in the history 
…tent (#16969)
  • Loading branch information
@skoch98
skoch98 committed Apr 26, 2024
1 parent 6c9b718 commit 9b560dc
Show file tree
Hide file tree
Showing 18 changed files with 125 additions and 101 deletions.
16 changes: 8 additions & 8 deletions doc/03_Documents/01_Editables/02_Areablock/02_Bricks.md
View file
Expand Up @@ -172,10 +172,10 @@ brick metadata.
```twig
/* templates/areas/iframe/view.html.twig */
{% set urlField = pimcore_input('iframe_url') %}
{% set widthField = pimcore_numeric('iframe_width') %}
{% set heightField = pimcore_numeric('iframe_height') %}
{% set transparentField = pimcore_checkbox('iframe_transparent') %}
{% set urlField = pimcore_input("iframe_url") %}
{% set widthField = pimcore_numeric("iframe_width") %}
{% set heightField = pimcore_numeric("iframe_height") %}
{% set transparentField = pimcore_checkbox("iframe_transparent") %}
{% if editmode %}
<div>
Expand All @@ -198,9 +198,9 @@ brick metadata.
{% else %}
{% if not urlField.isEmpty() %}
{% set transparent = 'false' %}
{% set width = '100%' %}
{% set height = '400' %}
{% set transparent = "false" %}
{% set width = "100%" %}
{% set height = "400" %}
{% if not widthField.isEmpty() %}
{% set width = widthField.data %}
Expand All @@ -211,7 +211,7 @@ brick metadata.
{% endif %}
{% if transparentField.isChecked() %}
{% set transparent = 'true' %}
{% set transparent = "true" %}
{% endif %}
<iframe src="{{ urlField }}" width="{{ width }}" height="{{ height }}" allowtransparency="{{ transparent }}" frameborder="0"></iframe>
Expand Down
10 changes: 5 additions & 5 deletions doc/03_Documents/01_Editables/04_Area.md
View file
Expand Up @@ -22,19 +22,19 @@ into a block element, and the editor cannot choose which area is used, this has

```twig
<div>
{{ pimcore_area('myArea', { 'type' : 'gallery-single-images' }) }}
{{ pimcore_area("myArea", {"type": "gallery-single-images"}) }}
</div>
```

## Example with Parameters

```twig
<div>
{{ pimcore_area('myArea', {
type: 'gallery-single-images',
{{ pimcore_area("myArea", {
type: "gallery-single-images",
params: {
'gallery-single-images': {
'param1': 123,
"gallery-single-images": {
"param1": 123,
}
}
}) }}
Expand Down
16 changes: 8 additions & 8 deletions doc/03_Documents/01_Editables/06_Block.md
View file
Expand Up @@ -37,9 +37,9 @@ The items in the loop as well as their order can be defined by the editor with t
## Basic Usage

```twig
{% for i in pimcore_block('contentblock').iterator %}
<h2>{{ pimcore_input('subline') }}</h2>
{{ pimcore_wysiwyg('content') }}
{% for i in pimcore_block("contentblock").iterator %}
<h2>{{ pimcore_input("subline") }}</h2>
{{ pimcore_wysiwyg("content") }}
{% endfor %}
```

Expand All @@ -54,13 +54,14 @@ And in the frontend of the application:
### Example for `getCurrent()`

```twig
{% set myBlock = pimcore_block('contentblock', {'reload': true}) %}
{% set myBlock = pimcore_block("contentblock", {"reload": true}) %}
{% for i in myBlock.iterator %}
{% if myBlock.current > 0 %}
Insert this line only after the first iteration<br />
<br />
{% endif %}
<h2>{{ pimcore_input('subline') }}</h2>
<h2>{{ pimcore_input("subline") }}</h2>
{% endfor %}
```

Expand All @@ -72,7 +73,7 @@ And in the frontend of the application:
The manual mode offers you the possibility to deal with block the way you like, this is for example useful with tables:

```twig
{% set block = pimcore_block('gridblock', {'manual' : true, 'limit' : 6}).start() %}
{% set block = pimcore_block("gridblock", {"manual": true, "limit": 6}).start() %}
<table>
<tr>
{% for b in block.iterator %}
Expand Down Expand Up @@ -125,7 +126,7 @@ If you want to wrap buttons in a div or change the Position.
<div>
{% for b in block.iterator %}
{% do block.blockConstruct() %}
{% do block.blockStart(true, false, 'my-additional-class') %}
{% do block.blockStart(true, false, "my-additional-class") %}
Add additional class 'my-addional-class' to editmode-div
{% do block.blockEnd() %}
{% do block.blockDestruct() %}
Expand All @@ -140,7 +141,6 @@ If you want to wrap buttons in a div or change the Position.
Bricks and structure refer to the CMS demo (content/default template).

```twig
{# load document #}
{% set document = pimcore_document_by_path('/en/More-Stuff/Developers-Corner/Galleries') %}
Expand Down
8 changes: 4 additions & 4 deletions doc/03_Documents/01_Editables/08_Checkbox.md
View file
Expand Up @@ -18,18 +18,18 @@
## Simple Example

```twig
{{ pimcore_checkbox('myCheckbox') }}
{{ pimcore_checkbox("myCheckbox") }}
```


## Advanced Example

```twig
Setting XYZ: {{ pimcore_checkbox('myCheckbox') }}
Setting XYZ: {{ pimcore_checkbox("myCheckbox") }}
{% if pimcore_checkbox('myCheckbox').isChecked() %}
{% if pimcore_checkbox("myCheckbox").isChecked() %}
<div>
{{ dump('do something') }}
{{ dump("do something") }}
</div>
{% endif %}
```
6 changes: 3 additions & 3 deletions doc/03_Documents/01_Editables/10_Date.md
View file
Expand Up @@ -25,8 +25,8 @@ Localization (output-format, ...) is automatically used from the globally regist
Please read the topic [Localization](../../06_Multi_Language_i18n/README.md).

```twig
{{ pimcore_date('myDate', {
'format': 'd.m.Y',
'outputIsoFormat': 'DD.MM.YYYY'
{{ pimcore_date("myDate", {
"format": "d.m.Y",
"outputIsoFormat": "DD.MM.YYYY"
}) }}
```
2 changes: 1 addition & 1 deletion doc/03_Documents/01_Editables/12_Relation_Many-To-One.md
View file
Expand Up @@ -47,7 +47,7 @@ options in the editable configuration.
##### Example

```twig
{{ pimcore_relation("myRelation",{
{{ pimcore_relation("myRelation", {
"types": ["asset","object"],
"subtypes": {
"asset": ["video", "image"],
Expand Down
6 changes: 3 additions & 3 deletions doc/03_Documents/01_Editables/14_Image.md
View file
Expand Up @@ -122,7 +122,7 @@ And this is how the rendered html looks: `<img custom-attr="value" data-role="im
{# Custom image tag (thumbnail objects) #}
{% if editmode %}
{{ pimcore_image("myImage",{"thumbnail": "myThumbnail"}) }}
{{ pimcore_image("myImage", {"thumbnail": "myThumbnail"}) }}
{% else %}
{% set thumbnail = pimcore_image("myImage").getThumbnail("myThumbnail") %}
<img src="{{ thumbnail }}" width="{{ thumbnail.width }}" height="{{ thumbnail.height }}" />
Expand All @@ -133,7 +133,7 @@ And this is how the rendered html looks: `<img custom-attr="value" data-role="im
{# Custom drop targets #}
<div class="myCustomImageDropTarget anotherClass">My first alternative drop target</div>
{{ pimcore_image("image",{
{{ pimcore_image("image", {
"thumbnail": "contentfullimage",
"dropClass": "myCustomImageDropTarget"
}) }}
Expand Down Expand Up @@ -171,7 +171,7 @@ All dimensions are in percent and therefore independent from the image size, you
```twig
<div>
<p>
{{ pimcore_image("myImage",{
{{ pimcore_image("myImage", {
"title": "Drag your image here",
"width": 400,
"height": 400,
Expand Down
19 changes: 10 additions & 9 deletions doc/03_Documents/01_Editables/16_Input.md
View file
Expand Up @@ -7,14 +7,15 @@ For a multi-line alternative have a look at the [textarea editable](./36_Textare

## Configuration

| Name | Type | Configuration |
|--------------------|---------|---------------------------------------------------------------------------------------|
| `width` | integer | Width of the input in editmode (in pixels) |
| `htmlspecialchars` | boolean | Set to false to get the raw value without HTML special chars like & (default to true) |
| `nowrap` | boolean | set to false to disable the automatic line break |
| `class` | string | A CSS class that is added to the surrounding container of this element in editmode |
| `placeholder` | string | A placeholder that is displayed when the field is empty |
| `required` | boolean | set to true to make field value required for publish |
| Name | Type | Configuration |
|--------------------|---------|------------------------------------------------------------------------------------------------|
| `width` | integer | Width of the input in editmode (in pixels) |
| `htmlspecialchars` | boolean | Set to false to get the raw value without HTML special chars like & (default to true) |
| `nowrap` | boolean | set to false to disable the automatic line break |
| `class` | string | A CSS class that is added to the surrounding container of this element in editmode |
| `placeholder` | string | A text shown in the field when it is empty to guide the user about the expected type of input. |
| `defaultValue` | string | A default value for the available options. |
| `required` | boolean | set to true to make field value required for publish |

## Methods

Expand Down Expand Up @@ -42,6 +43,6 @@ You could also specify other parameters, like the size:

```twig
<h2>
{{ pimcore_input("headerLine", {'width': 540}) }}
{{ pimcore_input("headerLine", {"width": 540}) }}
</h2>
```
6 changes: 3 additions & 3 deletions doc/03_Documents/01_Editables/18_Link.md
View file
Expand Up @@ -43,7 +43,7 @@ such as: `class`, `target`, `id`, `style`, `accesskey`, `name`, `title`, `data-*
```twig
<p>
{{ "Visit our" | trans }}
{{ pimcore_link('blogLink') }}
{{ pimcore_link("blogLink") }}
</p>
```

Expand All @@ -64,8 +64,8 @@ Let's see how to make a list of links with [Block](./06_Block.md).
```twig
<h3>{{ "Useful links" | trans }}</h3>
<ul>
{% for i in pimcore_block('linkblock').iterator %}
<li>{{ pimcore_link('myLink', {'class': "special-link-class"}) }}</li>
{% for i in pimcore_block("linkblock").iterator %}
<li>{{ pimcore_link("myLink", {"class": "special-link-class"}) }}</li>
{% endfor %}
</ul>
```
Expand Down
18 changes: 9 additions & 9 deletions doc/03_Documents/01_Editables/22_Multiselect.md
View file
Expand Up @@ -27,18 +27,18 @@ Also, it shows the list of chosen elements in the frontend.

```twig
{% if editmode %}
{{ pimcore_multiselect('categories', {
'width': 200,
'height': 100,
'store': [
['cars', 'Cars'],
['motorcycles', 'Motorcycles'],
['accessories', 'Accessories'],
{{ pimcore_multiselect("categories", {
"width": 200,
"height": 100,
"store": [
["cars", "Cars"],
["motorcycles", "Motorcycles"],
["accessories", "Accessories"],
]
}) }}
{% else %}
<p>{{ 'This page is linked to' | trans }}
{% for categoryKey in pimcore_multiselect('categories').getData %}
<p>{{ "This page is linked to" | trans }}
{% for categoryKey in pimcore_multiselect("categories").getData %}
<span>
{{ categoryKey | trans }}
</span>
Expand Down
29 changes: 15 additions & 14 deletions doc/03_Documents/01_Editables/24_Numeric.md
View file
Expand Up @@ -5,13 +5,14 @@ The numeric editable is very similar to the [input editable](./16_Input.md), but

## Configuration

| Name | Type | Description |
|------------|---------|------------------------------------------------------------------------------------|
| `maxValue` | float | Define a maximum value |
| `minValue` | float | Define a minimum value |
| `width` | integer | Width of the field in pixel |
| `class` | string | A CSS class that is added to the surrounding container of this element in editmode |
| `required` | boolean | set to true to make field value required for publish |
| Name | Type | Description |
|----------------|---------|------------------------------------------------------------------------------------|
| `maxValue` | float | Define a maximum value |
| `minValue` | float | Define a minimum value |
| `width` | integer | Width of the field in pixel |
| `class` | string | A CSS class that is added to the surrounding container of this element in editmode |
| `defaultValue` | string | A default value for the available options **as string** |
| `required` | boolean | set to true to make field value required for publish |

## Methods

Expand All @@ -25,7 +26,7 @@ The numeric editable is very similar to the [input editable](./16_Input.md), but
### Basic Usage

```twig
{{ pimcore_numeric('myNumber') }}
{{ pimcore_numeric("myNumber") }}
```

Now you can see the **numeric** value in the editmode view
Expand All @@ -36,11 +37,11 @@ Now you can see the **numeric** value in the editmode view
In the following example we're going to use a minimal and maximum value as well as a decimal precision.

```twig
{{ pimcore_numeric('myNumber',{
"width" : 300,
"minValue" : 0,
"maxValue" : 100,
"decimalPrecision" : 0
{{ pimcore_numeric("myNumber", {
"width": 300,
"minValue": 0,
"maxValue": 100,
"decimalPrecision": 0
})
}}
```
Expand All @@ -49,6 +50,6 @@ To display the number also in editmode, you can use the method `getData()`

```twig
<p>
{{ pimcore_numeric('myNumber').getData() }}
{{ pimcore_numeric("myNumber").getData() }}
</p>
```
2 changes: 1 addition & 1 deletion doc/03_Documents/01_Editables/25_Embed.md
View file
Expand Up @@ -24,5 +24,5 @@ Additionally you can use any configuration option of [Embera](https://github.com
{{ pimcore_embed("socialWidgets") }}
{# Advanced usage #}
{{ pimcore_embed("socialWidgets", { "width": 540 }) }}
{{ pimcore_embed("socialWidgets", {"width": 540}) }}
```
14 changes: 7 additions & 7 deletions doc/03_Documents/01_Editables/28_Renderlet.md
View file
Expand Up @@ -51,10 +51,10 @@ The code below shows how to use renderlet to create gallery based on it.
```twig
<section id="renderlet-gallery">
{{
pimcore_renderlet('myGallery', {
"controller" : "App\\Controller\\ContentController::myGalleryAction",
"title" : "Drag an asset folder here to get a gallery",
"height" : 400
pimcore_renderlet("myGallery", {
"controller": "App\\Controller\\ContentController::myGalleryAction",
"title": "Drag an asset folder here to get a gallery",
"height": 400
})
}}
</section>
Expand Down Expand Up @@ -96,7 +96,7 @@ Now you have to create the template file at: `templates/content/my_gallery.html.
{% for asset in assets %}
{% if asset is instanceof('\\Pimcore\\Model\\Asset\\Image') %}
<div class="gallery-row">
{{ asset.getThumbnail('myThumbnailName').getHTML()|raw }}
{{ asset.getThumbnail("myThumbnailName").getHTML()|raw }}
</div>
{% endif %}
{% endfor %}
Expand All @@ -114,9 +114,9 @@ And the final view is like, below:
```twig
{{
pimcore_renderlet('myRenderlet', {
pimcore_renderlet("myRenderlet", {
....
"editmode" : editmode
"editmode": editmode
})
}}
```
Expand Down

0 comments on commit 9b560dc

Please sign in to comment.