Introduction
The Grid Elements extension transfers the concept of backend layouts known since TYPO3 4.5 to content elements. A common application example would be multi-column container elements, in which content elements can then be placed.
In this article we explain the installation and show an application example using a 2-column container element.
New functions in the page module
Grid Elements also brings some new functions for the page module.
The plus symbol at the top opens a drag-in wizard, which can be used to drag and drop all available content elements into the page.
There is a new icon in the content area. Here you can use the TYPO3 element browser to copy content from other pages directly to the current page.
Create grid element
General" tab
Title:
You must enter a title for the grid element here.
Description:
You can enter an optional description here.
Display:
Here you can define an icon for the grid element. This icon will then also be visible later in the backend. When using several grid elements, this makes sense in order to visualize the function.
Configuration" tab
Top level layout:
Grid elements can also be nested inside each other. If you check this box, the grid element marked in this way cannot be subordinated to other grid elements.
Grid configuration:
The heart of the configuration. The layout of the grid element is defined here. To do this, click on the icon to the right of the field. The grid wizard then opens. This works in almost exactly the same way as the creation of backend layouts.
The Grid Wizard
You can use the Grid Wizard to define the layout.
You can use the small arrows on the right and bottom edge to add additional columns or rows and remove them again. The larger gray arrows in the cells can be used to link several cells together.
Then click on the pencil icon next to each cell to further configure the individual cells!
Define cell name and column number
Give each cell a meaningful name. This will also be visible later in the page module.
In addition, each cell must have a unique column number (ID). This is used to define the output of the cell later via Typoscript.
In the "Permitted CE" area, you can restrict the types of content elements that may be stored in the cell. If you do not select anything here, all content elements available for the respective backend user will be permitted.
Then click on "Save in cell".
To close the Grid Wizard, click on the "Save and close" icon at the top.
After you have saved and closed the Grid Wizard, you will see the configuration you have just created in the "Grid configuration" field.
In principle, this is a normal Typoscript, which can also be edited manually. So if you want to change the name or ID (colPos) of a cell, for example, you can do this directly in this field without having to start the Grid Wizard again.
Configuring the output of the grid element via Typoscript
Although the content in the grid element is already visible in the frontend, a few steps are still missing.
In our example, we want to display the content in two columns next to each other. We must therefore ensure that the content is output in an HTML structure that subsequently allows appropriate styling via CSS.
In this example, the left column should be enclosed by a <div> with the class col1 and the right column by a <div> with the class col2.
In addition, the entire element should be enclosed by a <div> with the class element2cols. However, this is not absolutely necessary (depending on the CSS of the rest of the website).
You can either write the following Typoscript in the setup of your root template, or you can create an extension template and integrate it into the root template. The procedure here is a matter of taste, so to speak.
Make sure that you enter the correct ID of the grid element! In my example, this is 3. If you have only created one grid element so far, it will probably be 1.
# Customize the output of the grid elements
tt_content.gridelements_pi1.20.10.setup {
# ID of the grid element
3 < lib.gridelements.defaultGridSetup
3 {
columns {
# colPos ID
10 < .default
10.wrap = <div class="col1">|</div>
# colPos ID
20 < .default
20.wrap = <div class="col2">|</div>
}
# Optionally, the entire element can be given a wrap
wrap = <div class="element2cols">|</div>
}
}
Customize output in the frontend via CSS
Although the correct HTML structure should already be generated in the frontend after the last step, the styling via CSS is still missing.
The following CSS code could be used for the example grid element.
Attention:
if you attach importance to the correct display in older Internet Explorers, the CSS or the HTML generated by Typoscript may have to be modified. The code used is only a simple example!
.element2cols { overflow:hidden;}
.col1, .col2 { width:48%; float:left; }
.col1 { margin-right:2%; }
.col2 { margin-left: 2%; }
This page contains automatically translated content.