How-to library · Developer docs

How-to library

Task-shaped pages: a title that starts with a verb, the situation in a few lines, the steps, the working code in both engines, and why this way rather than another. Found from a search, done, and left.

How-to Layouts, areas and components

Make an area an attribute instead of content

Published

Tick Attribute on the layout area and it leaves the content form for the Attributes tab, button or cog, depending on where it lives. Templates read it exactly as before; only the author's form changes.

Context

Context. Authors should see content first and configuration second. An attribute is a layout area demoted from content to setting: a background style, an alignment, a "hide on mobile" switch. It leaves the main form and appears on a record's Attributes tab, behind an Attributes button in a component's header, or behind a cog beside the layout area it is attached to. Nothing changes for the template.

Steps

  1. Edit the layout area on the layout and tick Attribute. Give it a select or switch input type; attributes are almost never free text.
  2. Leave it outside any group; the platform moves it out anyway.
  3. Optionally attach it to a parent area, so it sits behind that field's cog: see Attach alt text and a crop as attributes of an image area.
  4. Read it with getAreaText() or getAreaValues(). Never the shorthand: attribute values go into class names and comparisons, where the live-preview wrapper breaks markup.

Template code

Template code 
{$style = $component->getAreaText('sectionStyle')}
{$hideOnMobile = $component->getAreaText('hideOnMobile') == '1'}
<section class="section {$style}{if $hideOnMobile} d-none d-md-block{/if}">
  {$component->body}
</section>
{% set style = component.getAreaText('sectionStyle') %}
{% set hideOnMobile = component.getAreaText('hideOnMobile') == '1' %}
<section class="section {{ style }}{% if hideOnMobile %} d-none d-md-block{% endif %}">
  {{ component.body }}
</section>

Why this and not that

Not a separate "settings" layout: one record has one layout. Not a naming convention alone ("Advanced: background"): the form still shows it among the content. Name switches for the state that needs a decision, hideOnMobile rather than showOnMobile, because an unset switch and an off switch read the same to a template.

Go deeper
GuideThe fields of a layout area GuideHow the area shorthand resolves

Was this page helpful?

Your answer goes to the docs team.