Skip to content

Instantly share code, notes, and snippets.

@wbrowar
Last active March 31, 2024 20:33
Show Gist options
  • Save wbrowar/7f95b1c1eead04f494cea524166614f6 to your computer and use it in GitHub Desktop.
Save wbrowar/7f95b1c1eead04f494cea524166614f6 to your computer and use it in GitHub Desktop.
Test Little Layout fields in 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 %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment