Test Little Layout fields in Twig

test-little-layout-field-twig.twig

{# Set the hande of the little layout field you want to test. #}
{% set fieldHandle = 'layout' %}
{% set gqlQuery %}
    {
        entries(type: "homepage") {
            ... on homepage_Entry {
                layout {
                    empty
                    gridColumnStart
                    gridColumnEnd
                    gridRowStart
                    gridRowEnd
                    gridColumnSpan
                    gridRowSpan
                    selectedColumns
                    selectedRows
                    selectedCoordinates
                    totalColumns
                    totalRows
                }
            }
        }
    }
{% endset %}

{% if element ?? false %}
    {% set littleLayoutField = element[fieldHandle] %}
    {% set totalColumns = littleLayoutField.totalColumns %}
    {% set totalRows = littleLayoutField.totalRows %}

    <h2>grid-column-start: ×, grid-column-end: ×, grid-row-start: y, grid-row-end: y</h2>

    {% set highlightAttributes = {
        style: {
            'background-color': '#8dd0ffcc',
            'grid-column-start': littleLayoutField.gridColumnStart,
            'grid-column-end': littleLayoutField.gridColumnEnd,
            'grid-row-start': littleLayoutField.gridRowStart,
            'grid-row-end': littleLayoutField.gridRowEnd,
        }
    } %}

    <div style="display: grid; grid-template-columns: {{ totalColumns }}; grid-template-columns: {{ totalRows }}; gap: 4px; max-width: 700px;">
        {% for row in 1..totalRows %}
            {% for col in 1..totalColumns %}
                {% set cellAttributes = {
                    style: {
                        'background-color': '#a8abb6',
                        'aspect-ratio': '1 / 1',
                        'grid-column-start': col,
                        'grid-column-end': col,
                        'grid-row-start': row,
                        'grid-row-end': row,
                    }
                } %}

                <div {{ attr(cellAttributes) }}></div>
            {% endfor %}
        {% endfor %}
        <div {{ attr(highlightAttributes) }}></div>
    </div>

    <hr>

    <h2>grid-column: x / span ×, grid-row: y / span y</h2>

    {% set highlightAttributes = {
        style: {
            'background-color': '#8dd0ffcc',
            'grid-column': littleLayoutField.gridColumnStart ~ ' / span ' ~ littleLayoutField.gridColumnSpan,
            'grid-row': littleLayoutField.gridRowStart ~ ' / span ' ~ littleLayoutField.gridRowSpan,
        }
    } %}

    <div style="display: grid; grid-template-columns: {{ totalColumns }}; grid-template-columns: {{ totalRows }}; gap: 4px; max-width: 700px;">
        {% for row in 1..totalRows %}
            {% for col in 1..totalColumns %}
                {% set cellAttributes = {
                    style: {
                        'background-color': '#a8abb6',
                        'aspect-ratio': '1 / 1',
                        'grid-column-start': col,
                        'grid-column-end': col,
                        'grid-row-start': row,
                        'grid-row-end': row,
                    }
                } %}

                <div {{ attr(cellAttributes) }}></div>
            {% endfor %}
        {% endfor %}
        <div {{ attr(highlightAttributes) }}></div>
    </div>

    <hr>

    <p><b>Value: </b> <br> <code><pre>{{ littleLayoutField|json_encode }}</pre></code></p>
    <p><b>Empty: </b> {{ littleLayoutField.empty|json_encode }}</p>
    {% if not littleLayoutField.empty %}
        <p><b>Raw: </b> {{ littleLayoutField.raw }}</p>

        <hr>

        <p><b>gridColumnStart:</b> {{ littleLayoutField.gridColumnStart }}</p>
        <p><b>gridColumnEnd:</b> {{ littleLayoutField.gridColumnEnd }}</p>
        <p><b>gridRowStart: </b> {{ littleLayoutField.gridRowStart }}</p>
        <p><b>gridRowEnd:</b> {{ littleLayoutField.gridRowEnd }}</p>
        <p><b>gridColumnSpan:</b> {{ littleLayoutField.gridcolumnSpan }}</p>
        <p><b>gridRowSpan:</b> {{ littleLayoutField.gridRowSpan }}</p>

        <hr>

        <p><b>selectedRows: </b> {{ littleLayoutField.selectedRows|json_encode }}</p>
        <p><b>selectedColumns:</b> {{ littleLayoutField.selectedColumns|json_encode }}</p>
        <p><b>selectedCoordinates:</b> {{ littleLayoutField.selectedCoordinates|json_encode }}</p>

        <hr>

        {% set result = gql(gqlQuery) %}
        <p><b>GQL: </b></p>
        <code><pre style="white-space: pre-wrap">{{ result|json_encode }}</pre></code>

        <hr>

        <p><b>totalRows:</b> {{ littleLayoutField.totalRows }}</p>
        <p><b>totalColumns:</b> {{ littleLayoutField.totalColumns }}</p>
    {% endif %}
{% else %}
    <p>Not a guide with an element on it.</p>
{% endif %}