DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Customize

You are able to change the behaviour of the pre-defined gridsystems. These are designed to be easily customizable.

Backend

If you want to change the behaviour in the backend you need to modify the Page TSConfig under the path mod.cloumn_layout.

Make sure you include your TSConfig file after include this extension's.

Gridsystem Columns

Increase the columns count of the gridsystem:

mod.column_layout {
    columnsCount = 24
}

Change columns

To change the allowed columns for each size type you need to override the values like this:

mod.column_layout {

    sizes {
        large {
            widths = <restriction>
            offsets = <restriction>
            orders = <restriction>
        }

        ...
    }
}

Possible values for <restriction> are:

  • the all selector * for any column (an array will be created from 0 to the columnsCount)
  • a range other numbers delimited by a hyphen - (e.g. 0-6)
  • a list of comma-separated numbers (e.g. 2,4,6)

Please note that a 0 must be added to the list in order to allow a disabled value.

Frontend

You can change the rendering of the grid rows and columns by modifying the TypoScript. Have a look at the lib.tx_column_layout. path.

Change Row Rendering

The rendering of the row wrapping is split into two parts:

  1. Starting a row. Adjust the lib.tx_column_layout.rowWrap.start TypoScript
  2. Ending a row. Adjust the lib.tx_column_layout.rowWrap.end TypoScript

The rendered row html is immediately added before, respectively after the content.

Change Column Rendering

The rendering of the column is defined in lib.tx_column_layout.columnWrap.content.

Its value is passed along with the content to the TypoScript wrap function. The delimiter is | always.