A visual editor for complex multi-column layouts
By default the layout field comes with a single 1-column layout and all the default fieldsets from the Blocks field.
Defining your own layouts
Defining available layouts is simple: each layout is list of column widths. i.e.
1/2, 1/2 or
1/4, 3/4 …
If the sum of the layout is greater than one, the other columns will be wrapped to the next line.
Those layouts will then show up in the layout selector when an editor creates a new row:
The layout field supports up to 12 columns and all are listed below.
The layout field also accepts the
fieldsets option from the blocks field to control blocks in columns.
The fieldsets setup is exactly the same. You can follow the instructions from the Blocks field.
It's often useful to set additional class names, IDs or even something like background colors and images for layout sections. This can be achieved with layout settings.
Layout settings are defined globally. Each layout will then get a "Settings" button in its dropdown and open a settings drawer with the configured fields.
If you have a lot of settings, you can organize them in tabs:
Reusing and extending layout settings
If you always use the same options in layouts and want to easily update all of them from a single file without repeating the options, you can reuse or extend the layout settings. Let's see how:
Sample settings fields
How to render layouts in templates?
toLayouts field method, you can retrieve a Layouts collection - a collection of
Calculate the column span value
Each column in a layout has a
$column->width() method which will return the width defined in the blueprint. (i.e.
1/2) but for many grid systems you need to know how many columns the current column should span in the grid. This can be done with the
$column->span() method. The method calculates with a 12-column grid by default. So for example, if your column width is
1/2 the span method would return a value of 6. If you are working with a different kind of grid system you can pass the number of columns like this:
Working with individual blocks
In some cases, you might even want to controll the way blocks within layouts are rendered.
$column->blocks() will return a blocks collection that you can work with and create another nested foreach loop.
Passing the layout object to the block snippet
If you need to access the layout object in a block snippet, you need to pass it to the snippet manually.