Skip to content

Layouts

Full example of a layout

Click on the annotations to know more.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
# directives
inherit: null               # (1)
no-default: false           # (2)
no-parent: false            # (3)
no-block-cache: false       # (4)
no-full-page-cache: false   # (5)
no-cache: false             # (6)
no-application-state: false # (7)
element-ttl: 0 # (34)
# references
blockReferences:
  - 
    some-block-name-to-remove:
      remove: true # (25)
  - 
    some-other-block-name:
      arguments:
        some-argument-name:
          - 
            action: remove # (23)
        some-other-argument-name:
          -  
            value: "new value" # (24)

containerReferences:
  -
    some-container-id:
      remove: true # (26)

textReferences:
  -
    some-text-name:
      remove: true # (27)

fragmentReferences:
  -
    some-fragment-id:
      remove: true # (30)

# the head
head:
  html:
    attributes: # (8)
      lang: en
  elements: # (9)
    - tag: meta # (10)
      attributes:
        name: "viewport"
        content: "width=device-width, initial-scale=1.0"
    - tag: meta
      attributes:
        http-equiv: "X-UA-Compatible"
        content: "IE=edge"
    - tag: meta
      attributes:
        http-equiv: Content-Type
        content: text/html; charset=utf-8
# the body
body:
  - container: # (11)
      body-pd: # (12)
        content: # (13)
          - container: # (14)
              main-nav: # (15)
                tag: nav # (16)
                attributes: # (17)
                  class: navbar fixed-top navbar-expand-lg navbar-light bg-light
                content:
                  - container:
                      main-nav-container:
                        attributes:
                          class: container-fluid
                        content:
                          - block:
                              main-nav-content:
                                # (18)
                                viewModel: Amarant\Backoffice\ViewModel\NavViewModel
                                # (19)
                                template: "page/navbar.html.twig"
                                arguments:
                                    # (20)
                                    some-argument-name: '@Vendor\ModuleName\View\SomeImplementation'

          - container:
              session-messages:
                attributes:
                  class: "container session-messages"
                content:
                  - block:
                      session-messages-content:
                        ttl: 0 # (21)
                        template: "page/session.messages.html.twig"
                  - text: # (28)
                      some-text-element:
                        content: Text content # (29)

          - container:
              main-content:
                content: # (22)

# fragments
fragments:
  some-fragment-id: # (31)
    tags: ['page-layout-head-end'] # (32)
    content: # (33)
      - block:
          fragment-content:
            template: "page/fragment.template.html.twig"
  1. Specify a name of a layout to inherit.
  2. Do not inherit any default layouts.
  3. Currently unused.
  4. Disable block cache.
  5. Disable page cache.
  6. Disable both block and page cache.

  7. Skip adding the application state to page content.

  8. The attributes of the page <html>.

  9. Child elements of the page <head>.
  10. Specify tag and attributes of each element. This element renders as: <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  11. This the root container of the page.
  12. The container's name.
  13. The container's content.
  14. Nested container element.
  15. Nested container element's name.
  16. Container element's tag.
  17. Container element's HTML attributes.
  18. Block's view model its template can use.
  19. Block's template.
  20. Block arguments, key-value format. To inject a type using DI container, prefix the value with @.
  21. Block's cache TTL. In this case, 0 means the block shouldn't be cached.
  22. An empty container another layout can place its container into.
  23. Removes the block argument.

  24. Sets the new value for the block argument. If the new value is an array, you can set the action to merge or replace to merge or replace the new and old value arrays. merge is default.

    If the old value is an array, you can set the action to append or prepend to append or prepend to the old value array. append is default.

  25. Remove a block element.

  26. Remove a container element.
  27. Remove a text element.
  28. A text element.
  29. Text element content.
  30. Remove a fragment.
  31. Fragment's unique id.
  32. Tags to assign to the fragment.
  33. Content structure same as in element's content.
  34. Overrides cache TTL of all block and text elements in the current layout only.

Move a container

Containers, including their nested content, can be moved into another container. For example, a default layout defines a common page layout with an empty main content container. Other layouts can insert their content into it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
body:
  - container:
      some-container-name:
        move: # (1)
          main-content: # (2)
            strategy: prepend # (3)
            inner-target: target-name # (4)
        content:
          - block:
              a-block-name:
                template: "page/template.html.twig"
  1. The move directive.
  2. The target container.
  3. Optional. Use append or prepend. If no strategy is defined, the container will be appended.
  4. Optional. Specify a child container element of the target element at which the container will be prepended or appended.

Remove a container

1
2
3
4
containerReferences:
  -
    some-container-id:
      remove: true

Remove a block

1
2
3
4
blockReferences:
  -
    some-block-name:
      remove: true

Remove a text

1
2
3
4
textReferences:
  -
    some-text-name:
      remove: true

Remove a fragment

1
2
3
4
fragmentReferences:
  -
    some-fragment-id:
      remove: true