New Section Settings

section.html.twig

{% set attr_class = segment.attributes.class ? ' class="' ~ segment.attributes.class|e ~ '"' %}
{% set attr_id = segment.title|lower|replace({' ': '-'}) %}
{% set attr_extra = '' %}
{% set tag_type = (attr_id in ['aside', 'footer', 'header', 'main']) ? attr_id : 'section' %}
{% set attr_background_image = segment.attributes.background_image ? segment.attributes.background_image|trim|e : false %}
{% set attr_background_color = segment.attributes.background_color ? segment.attributes.background_color|trim|e : transparent %}
{% set attr_background_repeat = segment.attributes.background_repeat ? segment.attributes.background_repeat|trim|e : no-repeat %}
{% set attr_background_clip = segment.attributes.background_clip ? segment.attributes.background_clip|trim|e : initial %}
{% set attr_background_position = segment.attributes.background_position ? segment.attributes.background_position|trim|e : initial %}
{% set attr_background_origin = segment.attributes.background_origin ? segment.attributes.background_origin|trim|e : initial %}
{% set attr_background_attachment = segment.attributes.background_attachment ? segment.attributes.background_attachment|trim|e : initial %}
{% set attr_background_size = segment.attributes.background_size ? segment.attributes.background_size|trim|e : cover %}
{% set attr_background_height = segment.attributes.background_height ? segment.attributes.background_height|trim|e : false %}
{% set attr_background_margin_top = segment.attributes.background_margin_top ? segment.attributes.background_margin_top|trim|e : false %}
{% set attr_background_margin_bottom = segment.attributes.background_margin_bottom ? segment.attributes.background_margin_bottom|trim|e : false %}
{% set attr_background_margin_right = segment.attributes.background_margin_right ? segment.attributes.background_margin_right|trim|e : false %}
{% set attr_background_margin_left = segment.attributes.background_margin_left ? segment.attributes.background_margin_left|trim|e : false %}
{% set attr_background_padding = segment.attributes.background_padding ? segment.attributes.background_padding|trim|e : false %}

{% if segment.attributes.extra %}
  {% for attributes in segment.attributes.extra %}
    {% for key, value in attributes %}
    {% set attr_extra = attr_extra ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
    {% endfor %}
  {% endfor %}
{% endif %}

{% set html %}
  {% if segment.children %}
    {% for segment in segments %}
      {% include '@nucleus/layout/' ~ segment.type ~ '.html.twig' with { 'segments':segment.children } %}
    {% endfor %}
  {% endif %}
{% endset %}

{% if html|trim %}
  <{{ tag_type }} id="g-{{ attr_id }}" {{ attr_class|raw }}{{ attr_extra|raw }}>
  <div class="section-background" style="{% if attr_background_color %}background-color: {{ attr_background_color }};{% endif %}{% if attr_background_image %}background-image: url({{ attr_background_image }});{% endif %}{% if attr_background_size %}background-size: {{ attr_background_size }};{% endif %}{% if attr_background_clip %}background-clip: {{ attr_background_clip }};{% endif %}{% if attr_background_origin %}background-origin: {{ attr_background_origin }};{% endif %}{% if attr_background_repeat %}background-repeat: {{ attr_background_repeat }};{% endif %}{% if attr_background_position %}background-position: {{ attr_background_position }};{% endif %}{% if attr_background_attachment %}background-attachment: {{ attr_background_attachment }};{% endif %}{% if attr_background_height %}height: {{ attr_background_height }};{% endif %}{% if attr_background_margin_top %}margin-top: {{ attr_background_margin_top }};{% endif %}{% if attr_background_margin_bottom %}margin-bottom: {{ attr_background_margin_bottom }};{% endif %}{% if attr_background_margin_right %}margin-right: {{ attr_background_margin_right }};{% endif %}{% if attr_background_margin_left %}margin-left: {{ attr_background_margin_left }};{% endif %}{% if attr_background_padding %}padding: {{ attr_background_padding }};{% endif %}">
    {{ html|raw }}
  </div>
  </{{ tag_type }}>
{% endif %}

section.yaml

name: Section
description: Layout section.
type: section

form:
  fields:
    boxed:
      type: select.selectize
      label: Layout
      description: Select between a Fullwidth and Boxed.
      isset: true
      options:
        0: Fullwidth
        1: Boxed

    class:
      type: select.selectize
      label: CSS Classes
      description: Enter CSS class names.
      default:

    extra:
      type: collection.keyvalue
      label: Tag Attributes
      description: Extra Tag attributes.
      key_placeholder: Key (data-*, style, ...)
      value_placeholder: Value
      exclude: ['id', 'class']

    background_height:
      type: input.text
      label: Background Height
      description: Enter the height of the background image container.
      default:

    background_margin_top:
      type: input.text
      label: Background Top Margin
      description: Enter the background container's top margin parameters.
      default:

    background_margin_bottom:
      type: input.text
      label: Background Bottom Margin
      description: Enter the background container's bottom margin parameters.
      default:

    background_margin_right:
      type: input.text
      label: Background Right Margin
      description: Enter the background container's right margin parameters.
      default:

    background_margin_left:
      type: input.text
      label: Background Left Margin
      description: Enter the background container's left margin parameters.
      default:

    background_padding:
      type: input.text
      label: Background Padding
      description: Enter the background container's padding parameters.
      default:

    background_image:
      type: input.imagepicker
      label: Background
      description: Select image to be displayed as a background.

    background_color:
      type: input.colorpicker
      label: Background Color
      description: Select the background colour.
      default: "transparent"

    background_size:
      type: select.selectize
      label: Background Size
      description: Specify the size of the background image.
      placeholder: 'Select...'
      default: auto auto
      options:
        auto auto: Default
        auto: Auto
        contain: Contain
        cover: Cover
        inherit: Inherit

    background_clip:
      type: select.selectize
      label: Background Clip
      description: Specify the painting area of the background.
      placeholder: 'Select...'
      default: border-box
      options:
        border-box: Border Box
        padding-box: Padding Box
        content-box: Content Box
        initial: Default
        inherit: Inherit

    background_origin:
      type: select.selectize
      label: Background Origin
      description: Specifies where the background image is positioned (no effect if the background-attachment is "fixed").
      placeholder: 'Select...'
      default: padding-box
      options:
        border-box: Border Box
        padding-box: Padding Box
        content-box: Content Box
        initial: Default
        inherit: Inherit

    background_repeat:
      type: select.selectize
      label: Background Repeat
      description: Specifies where the background image is positioned (no effect if the background-attachment is "fixed").
      placeholder: 'Select...'
      default: repeat
      options:
        repeat: Repeat
        repeat-x: Repeat horizontally
        repeat-y: Repeat vertically
        no-repeat: Don't repeat
        initial: Default
        inherit: Inherit

    background_position:
      type: select.selectize
      label: Background Position
      description: Set the starting position of a background image.
      placeholder: 'Select...'
      default: 0% 0%
      options:
        left top: Left Top
        left center: Left Center
        left bottom: Left Bottom
        right top: Right Top
        right center: Right Center
        right bottom: Right Bottom
        center top: Center Top
        center center: Center Center
        center bottom: Center Bottom
        0% 0%: 0% 0%
        initial: Default
        inherit: Inherit

    background_attachment:
      type: select.selectize
      label: Background Attachment
      description: Sets whether a background image is fixed or scrolls with the rest of the page.
      placeholder: 'Select...'
      default: scroll
      options:
        scroll: Scroll
        fixed: Fixed
        local: Local
        initial: Default
        inherit: Inherit