Working with Data
build items array with push like syntax
{% set items = [] %}
{% set items = items|merge([{
width: 'two',
content: include('@organisms/10-article-card-demo.twig'),
}]) %}
{% set items = items|merge([{
width: 'one',
content: include('@organisms/10-article-card-demo.twig'),
}]) %}
{% include '@base/_group-grid.twig' with {
items: items,
} %}
A Good Strategy for starting files
{% set comp = node.field_competition.entity %}
{% set data = {
location: node.field_location.value,
has_audio: node.field_has_audio.value,
comment: node.field_comment.value,
score_opponent: node.field_score_opponent.value,
highlights: node.field_match_highlights.value,
competition: comp.field_name.value,
competition_logo: comp.field_logo.entity.getFileUri() | image_style('small'),
} %}
{# Great for debugging; comment it when not needed #}
<ol>
{% for key,value in data %}
<li>{{ key }} - {{ value }}</li>
{% endfor %}
</ol>
Sidenote: how to crash Drupal with Twig
Since your twig templates can potentially access PHP Classes, if you access something you're not supposed to (like a private method or property), it can cause a white screen of death.
Assuming data
has something that'll cause an error if accessed, take a peak at the difference between these two code snippets:
Due to value
being accessed, it'll crash:
<ol>
{% for key, value in data %}
<li>{{ key }} - {{ value }}</li>
{% endfor %}
</ol>
Due to value
not being accessed, it won't crash, but you can see the key names:
<ol>
{% for key,value in data %}
<li>{{ key }}</li>
{% endfor %}
</ol>