Liquid template

Sections use the same Liquid syntax as the rest of the LocomotiveCMS framework.

The section liquid drop is available inside the Liquid template of the section. It contains all the content filled by the user in the back-office.

Example

<section id="{{ section.anchor_id }}" {{ section.locomotive_attributes }}>
  <h2>{{ section.settings.greeting_word }}</h2>

  {% for block in section.blocks %}
    <div {{ block.locomotive_attributes }}>
      Here is a <strong>{{ block.type }}</strong> block. 
      Name: {{ block.settings.name }}
    </div>
  {% endfor %}
</section>

🚧

Always wrap your section with a HTML tag.

It can be any valid DOM element like a DIV, SECTION, NAV, ...etc.
The only requirement is to put {{ section.locomotive_attributes }} in the opening tag.

Settings

You can call settings like this:

{{ section.settings.<setting id> }}

For instance, if the id of the setting is title and you want to display it, you'll have to write the following statement: {{ section.settings.title }}.

{{ section.type }} will return the name of the section.

🚧

Wrap text type settings alone within a tag

It helps our editor UI to refresh the content in the most efficient way. Otherwise, the whole section will be rendered when the content will be updated which is not optimal.

Url type fields come with extra methods. Given the setting with my_link as its id, you will write the following Liquid code to display a HTML link:

<a href="{{ section.settings.my_link }}"  {{ section.settings.my_link.new_window_attribute }}>
  My link
</a>

<a href="{{ section.settings.my_link }}"  {% if section.settings.my_link.new_window %}target="_blank"{% endif %}>
  My link
</a>

Blocks

The blocks of your section are stored in an array and can be iterated through with
{% for block in section.blocks %}.

The provided block object contains all the settings through the settings key.
Example: {{ block.settings.name }}

If you want to have a difference output based on the type of the block, just check the type attribute.
Example: {% if block.type == 'video' %}...{% endif %}

🚧

Wrap the block within a tag

In order to avoid unnecessary calls to the server to re-render the whole section when modifying a simple text setting, we strongly recommend to wrap the block within a tag like this:

<TAG ... {{ block.locomotive_attributes }}>

where TAG can be any HTML5 tag.