Skip to content

Commit 4340643

Browse files
bryannielsenbryannielsen
committed
Improve template documentation, including examples in both Twig and Blade
1 parent a61435b commit 4340643

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1454
-542
lines changed

‎docs/templates/fieldtypes.md

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎docs/templates/fieldtypes.mdx

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# Fieldtypes
2+
3+
Fieldtypes in Coilpack are designed to provide a similar and consistent experience across all templating engines. The [ExpressionEngine documentation](https://docs.expressionengine.com/latest/fieldtypes/overview.html) provides more detail on how Fieldtypes behave natively while this documentation should help you understand how they can be used in Twig and Blade templates.
4+
5+
Certain parameters or modifiers may behave differently in Coilpack or may not be available at all. We will try to call attention to these special cases.
6+
7+
## Basic Syntax
8+
9+
<Tabs groupId="template-language">
10+
<TabItem value="twig" label="Twig">
11+
12+
```twig
13+
{# Field #}
14+
{{ entry.field_name }}
15+
16+
{# Field with parameters #}
17+
{{ entry.field_name.parameters({name: "value"}) }}
18+
19+
{# Modifier #}
20+
{{ entry.field_name.modifier_name() }}
21+
22+
{# Modifier with parameters #}
23+
{{ entry.field_name.modifier_name({parameter_name: "value"}) }}
24+
25+
{# Chaining Modifiers #}
26+
{{ entry.field_name.modifier_name({parameter_name: "value"}).another_modifier() }}
27+
```
28+
29+
</TabItem>
30+
<TabItem value="blade" label="Blade">
31+
32+
```php
33+
{{-- Field --}}
34+
{{ $entry->field_name }}
35+
36+
{{-- Field with parameters --}}
37+
{{ $entry->field_name->parameters(['name' => "value"]) }}
38+
39+
{{-- Modifier --}}
40+
{{ $entry->field_name->modifier_name() }}
41+
42+
{{-- Modifier with parameters --}}
43+
{{ $entry->field_name->modifier_name(['parameter_name' => "value"]) }}
44+
45+
{{-- Chaining Modifiers --}}
46+
{{ $entry->field_name->modifier_name(['parameter_name' => "value"]).another_modifier() }}
47+
```
48+
49+
</TabItem>
50+
</Tabs>
51+
52+
## Rendering HTML
53+
54+
Both Twig and Blade default to escaping HTML on output to prevent potential security issues. If you have a fieldtype or modifier that is rendering HTML you will need to change how they are output slightly to render the HTML properly.
55+
56+
<Tabs groupId="template-language">
57+
<TabItem value="twig" label="Twig">
58+
59+
```twig
60+
{{ entry.field_name | raw }}
61+
```
62+
63+
</TabItem>
64+
<TabItem value="blade" label="Blade">
65+
66+
```php
67+
{!! $entry->field_name !!}
68+
```
69+
70+
</TabItem>
71+
</Tabs>

‎docs/templates/fieldtypes/checkboxes.md

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎docs/templates/fieldtypes/checkboxes.mdx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# Checkboxes
2+
3+
Checkboxes allow publishers to choose multiple items from a list.
4+
5+
:::note
6+
The following examples use a field named `checkboxes_field`. This should be replaced with your field name.
7+
:::
8+
9+
### Single Variable
10+
11+
You can use a single variable for Checkboxes to render a comma-separated list of the labels.
12+
13+
<Tabs groupId="template-language">
14+
<TabItem value="twig" label="Twig">
15+
16+
```twig
17+
{{ entry.checkboxes_field }}
18+
19+
{% for value, label in entry.checkboxes_field.options %}
20+
{{ label }} - {{ value }}
21+
{% endfor %}
22+
23+
{% for value, label in entry.checkboxes_field.selected %}
24+
{{ label }} - {{ value }}
25+
{% endfor %}
26+
```
27+
28+
</TabItem>
29+
<TabItem value="blade" label="Blade">
30+
31+
```php
32+
{{ $entry->checkboxes_field }}
33+
34+
@foreach($entry->checkboxes_field->options as $value => $label)
35+
{{ $label }} - {{ $value }}
36+
@endforeach
37+
38+
@foreach($entry->checkboxes_field->selected as $value => $label)
39+
{{ $label }} - {{ $value }}
40+
@endforeach
41+
```
42+
43+
</TabItem>
44+
</Tabs>
45+
46+
## Parameters
47+
48+
### Limit
49+
50+
<Tabs groupId="template-language">
51+
<TabItem value="twig" label="Twig">
52+
53+
```twig
54+
{{ entry.checkboxes_field.parameters({limit: 1}) }}
55+
```
56+
57+
</TabItem>
58+
<TabItem value="blade" label="Blade">
59+
60+
```php
61+
{{ $entry->checkboxes_field->parameters(['limit' => 1]) }}
62+
```
63+
64+
</TabItem>
65+
</Tabs>
66+
67+
68+
69+
### Markup
70+
71+
<Tabs groupId="template-language">
72+
<TabItem value="twig" label="Twig">
73+
74+
```twig
75+
{{ entry.checkboxes_field.parameters({markup: 'ul'}) }}
76+
```
77+
78+
</TabItem>
79+
<TabItem value="blade" label="Blade">
80+
81+
```php
82+
{{ $entry->checkboxes_field->parameters(['markup' => 'ul']) }}
83+
```
84+
85+
</TabItem>
86+
</Tabs>
87+
88+
:::info
89+
See the ExpressionEngine Documentation for more information on the [Checkboxes fieldtype](https://docs.expressionengine.com/latest/fieldtypes/checkboxes.html)
90+
:::

‎docs/templates/fieldtypes/colorpicker.md

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎docs/templates/fieldtypes/colorpicker.mdx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# Colorpicker
2+
3+
The color picker lets you select pre-defined or custom colors.
4+
5+
:::note
6+
The following examples use a field named `colorpicker_field`. This should be replaced with your field name.
7+
:::
8+
9+
<Tabs groupId="template-language">
10+
<TabItem value="twig" label="Twig">
11+
12+
```twig
13+
<div style="background-color: {{ entry.colorpicker_field }}"></div>
14+
```
15+
16+
</TabItem>
17+
<TabItem value="blade" label="Blade">
18+
19+
```php
20+
<div style="background-color: {{ $entry->colorpicker_field }}"></div>
21+
```
22+
23+
</TabItem>
24+
</Tabs>
25+
26+
## Modifiers
27+
28+
### Contrast Color
29+
30+
Use the contrast_color modifier to output a black or white color that contrasts with the selected color
31+
32+
<Tabs groupId="template-language">
33+
<TabItem value="twig" label="Twig">
34+
35+
```twig
36+
{{ entry.colorpicker_field.contrast_color() }}
37+
```
38+
39+
</TabItem>
40+
<TabItem value="blade" label="Blade">
41+
42+
```php
43+
{{ $entry->colorpicker_field->contrast_color() }}
44+
```
45+
46+
</TabItem>
47+
</Tabs>
48+
49+
50+
:::info
51+
See the ExpressionEngine Documentation for more information on the [Colorpicker fieldtype](https://docs.expressionengine.com/latest/fieldtypes/colorpicker.html)
52+
:::

‎docs/templates/fieldtypes/date.md

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎docs/templates/fieldtypes/date.mdx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Date
2+
3+
Date fields render as regular date variables:
4+
5+
:::note
6+
The following examples use a field named `date_field`. This should be replaced with your field name.
7+
:::
8+
9+
<Tabs groupId="template-language">
10+
<TabItem value="twig" label="Twig">
11+
12+
```twig
13+
{{ entry.date_field }}
14+
```
15+
16+
</TabItem>
17+
<TabItem value="blade" label="Blade">
18+
19+
```php
20+
{{ $entry->date_field }}
21+
```
22+
23+
</TabItem>
24+
</Tabs>
25+
26+
27+
## Parameters
28+
29+
<Tabs groupId="template-language">
30+
<TabItem value="twig" label="Twig">
31+
32+
```twig
33+
{{ entry.date_field.parameters({format: '%m/%d/%Y', timezone: 'UTC'}) }}
34+
```
35+
36+
</TabItem>
37+
<TabItem value="blade" label="Blade">
38+
39+
```php
40+
{{ $entry->date_field->parameters(['format'=> '%m/%d/%Y', 'timezone' => 'UTC']) }}
41+
```
42+
43+
</TabItem>
44+
</Tabs>
45+
46+
47+
Visit [Date Variable Formatting](https://docs.expressionengine.com/latest/templates/date-variable-formatting.html) to see all date formatting options.
48+
49+
:::info
50+
See the ExpressionEngine Documentation for more information on the [Date fieldtype](https://docs.expressionengine.com/latest/fieldtypes/date.html)
51+
:::

0 commit comments

Comments
 (0)