Discuss your project
Partitech Sonata Extra Bundle

Sonata Extra Bundle: configure the Sonata Page layouts

Introduction Configuring Sonata Page layouts is a crucial step in creating a well-structured and visually appealing website. This guide will help you understand the process of configuring the layout in Sonata Page. Prerequisites Before continuing, make sur...

Written by Géraud Bourdin 2 min read

Introduction

Configuring Sonata Page layouts is a crucial step in creating a well-structured and visually appealing website. This guide will help you understand the process of configuring the layout in Sonata Page.

Prerequisites

Before continuing, make sure you have read the main SonataPage documentation: Read the SonataPage documentation

Setup steps

Step 1: define the configuration of your layout

Start by defining your layout in a YAML configuration file. Here is an example:

partitech_index:
  path: 'demo_index.html.twig'
  name: 'Partitech Index'
  containers:
    logo:
      name: Logo
    header:
      name: Header
    recherche:
      name: Recherche
    content:
      name: Contenu
    footer:
      name: Footer
  matrix:
    layout: |
      LLHHHHHHHHHHHHHHHHRR
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      FFFFFFFFFFFFFFFFFFFF
    mapping:
      L: logo
      H: header
      R: recherche
      C: content
      F: footer

Step 2: set up the main template

Set the path to your main template. This template will be used to render the entire page:

  • Path: layout_partitech_index.html.twig

Step 3: set up the containers

Define the containers in the configuration. Containers are sections in your layout such as the logo, the header, the content, etc.

  • Containers: Define the containers and assign them names to easily identify them.

Step 4: render the containers in the template

Place these containers in your main template using the following syntax:

{{ sonata_block_render_event('breadcrumb', { 'context': 'logo', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'header', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'recherche', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'content', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'footer', 'current_uri': app.request.requestUri }) }}

Step 5: set up the matrix and mapping

Set up the matrix to represent the content layout and map the layout codes (L, H, R, C, F) to the respective containers.

  • Matrix: This is the visual representation of the layout of your model, which helps to select containers in the Sonata administration interface.
  • Mapping: Helps link the matrix layout codes to the defined containers.

img.png

Conclusion

By following these steps, you will have a well-structured layout configuration for your SonataPage. This configuration will not only make your pages visually consistent but will also streamline your workflow in managing page content and layout.

Maintenance advice

Name containers according to their editorial role rather than their visual position. A stable matrix (header, main, aside, footer) better withstands graphic changes and facilitates the reuse of blocks between pages.

Share this article