Skip to content

Backdrop Deep Dive: Configuring Paths for Layouts

As we move many sites off of Drupal 7, we are doing some deep dives into other technical solutions. Today, a Backdrop project! Here's how we did it:

My goal: Add a block to an existing node defined by a path using Layouts

 

  1. Go to Structure > Layouts

  2. Click Add Layout

  3. Give the new layout a descriptive title.

  4. Select the layout template you would like to use based on the regions available.

  5. In the Path field, you have several options:
    Screenshot of the "Add layout" screen

    1. Enter a new URL path.
      This creates a NEW stand-alone Layout page on your site that is defined solely by the layout. By default on this path you will see blank page and you can add any blocks in the new layout

    2. Enter a previously registered “system path”.
      This allows you to target EXISTING pages that another module has previously defined. That module will be responsible for generating the primary content on the page, but you can use the layout to place additional blocks around it. The “Main page content” block -- generated by the module that defined the page -- will be placed into the layout automatically. Note: removing this block may cause the page to behave strangely.
      For instance:

      1. If you are going to target Content with your layout, you should enter node/%. With no further conditions defined, this layout will be used for ALL node pages. (This “system path” is provided by node module, and will show the “full” view mode of the node in the “Main page content” block).

      2. If you want to target a Taxonomy Category page, you should enter taxonomy/term/%. With no further conditions defined, this layout will be used for ALL taxonomy term pages. (This “system path” is provided by taxonomy module, and will show the term description, followed by a view of all nodes tagged with that term in the “Main page content” block).

  6. To narrow down your condition (In this example, Nodes) further, you will add a “visibility condition”. This is where you add details about your EXISTING entity (or entities) to target the layout.

  7. In this instance, I will use “URL path” and target my existing page with the alias “about”. 
    Screenshot of adding a visibility condition

  8. Save your layout.

  9. Add blocks to your regions and save your layout again.

  10. Check your entity to ensure the blocks are appearing correctly on the front end.