# Twig/Blade

The following is a basic example of how to render a Bloqs field with nested bloqs using Twig. If you're using Blade, the concepts are identical, just slightly different syntax for Blade.

Note the include statements are passing an array of possible template names to include in the brackets. If the first template file is not found, it will skip it and attempt to render the next one. For example, if you have a bloq named "summary" and you want that bloq to render entirely different HTML, just create a template named `_bloq_summary.html` All other bloqs will render in the `_bloq.html` template. These template names are completely arbitrary and you can choose any names you want. In this example I have a `coilpack.group` folder with the `_bloq.html.twig` and `_atom.html.twig` templates inside.

```twig
{# entry.html.twig #}

{% for entry in exp.channel.entries.parameters(
    {'channel': 'pages', 'entry_id': '4'}
) %}
    <h1>{{ entry.title }}</h1>

    {% for bloq in entry.bloqs %}
        {% include [
            ('ee::coilpack._bloq_' ~ bloq.getDefinition().getShortName()),
            'ee::coilpack._bloq'
        ] with {
            'bloq': bloq
        } %}
    {% endfor %}

{% else %}
    <span>No blog entries</span>
{% endfor %}
```

```twig
{# _bloq.html.twig #}

{% set bloqName = bloq.getDefinition().getShortName() %}
{% set isComponent = bloq.getDefinition().isComponent() %}

<div class="{% if isComponent %}component{% else %}basic{% endif %}">
    {% for atom in bloq.getAtoms() %}
        {% include [
            ('ee::coilpack._atom_' ~ atom.getDefinition().getShortName()),
            'ee::coilpack._atom'
        ] with {
            'atom': atom
        } %}
    {% endfor %}

    {% for child in bloq.getChildren() %}
        {% include [
            ('ee::coilpack._bloq_' ~ child.getDefinition().getShortName()),
            'ee::coilpack._bloq'
        ] with {
            'bloq': child
        } %}
    {% endfor %}
</div>
```

```twig
{# _atom.html.twig #}

{# If your atom contains HTML, use the raw modifier, e.g. {{ atom | raw }} #}
{{ atom }}
```

If in this scenario there was an atom with the short name of `content_with_image`, and a template file named `_atom_content_with_image.html.twig` existed, it would be loaded instead of the `_atom.html.twig` template.

Twig is extremly flexible and there are probably a number of ways to approach building out a Bloqs field. This is a basic example of how to use an include to render a deeply nested Bloqs field.

Once you have a bloq variable you can access it's atoms and atom values directly via the dot notation:

```twig
{% for entry in exp.channel.entries.parameters(
    {'channel': 'pages', 'entry_id': '4'}
) %}
    <h1>{{ entry.title }}</h1>

    {% for bloq in entry.bloqs %}
        {{ bloq.heading }}
        {{ bloq.summary }}
    {% endfor %}
{% endfor %}
```

### Relationships

Accessing relationship field data in Twig or Blade is the same as accessing any other array.

```twig
{% for entry in exp.channel.entries.parameters(
    {'channel': 'pages', 'entry_id': '4'}
) %}
    <h1>{{ entry.title }}</h1>

    {% for bloq in entry.bloqs %}
        {% for relationship in bloq.relationship_field %}
            {{ relationship.title %}
        {% endfor %}
    {% endfor %}
{% endfor %}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.boldminded.com/bloqs/docs/template-tags/twig-blade.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.