Please note that this documentation is for the most recent version of this extension. It may not be relevant for older versions. Related documentation can be found in the documentation directory of the extension.
Create Masonry
Go to the list module and activate the Masonry data container in the page tree. Click on Add Record and create a Masonry data record.
First assign a title to the data record so that you can locate the Masonry data record again. On the Items tab you can create as many items as you like in your Masonry - more on this in the next section. On the Grid gutter tab you can set the distance between your Masonry items. The distance is in pixels. You can set different distances depending on the responsive category.
Masonry Items
Masonry blocks are known as Masonry items. Each Masonry can contain any number of Masonry items - the following types are available pre-configured:
- Default: The default Masonry item which contains all data fields.
- QR-Code: This Masonry item displays a URL as a QR code.
- Owl-Carousel: This Masonry item displays a slideshow/image slider.
- Background-Image: This Masonry item displays a background image.
- HTML: Use this Masonry item to display simple HTML content.
Each Masonry item contains the following fields:
- Template: The template drop-down menu allows selection of different fluid versions of the Masonry item.
- Description: The Description field is for internal data.
- Responsive settings: The responsive settings are used to set the responsive categories for the masonry item. In general, a distinction is made between the following resolutions (similar to Bootstrap):
- Extra small devices (portrait phones)
- Small devices (landscape phones)
- Medium devices (tablets)
- Large devices (desktops)
- Extra large devices (large desktops)
The Masonry item must have a width and height specified for each category. These categories are based on the Bootstrap concept - that is, width is subdivided into a grid of 12. The width of the smallest possible Masonry item is 1/12 of the entire width. The height of a Masonry item is also based on the 12 grid and can always grow by 1/12.
After creating the Masonry object you can add it to any page using a Masonry content element.
TYPO3 Masonry
This extension ships a Masonry content element, that can be fully configured by the editor.