Skip to content

Article:The formatter "Masonry article teaser"

The article is suitable for creating news, press releases or blogs with optional images and texts in multiple paragraphs.

The masonry teaser displays a shortened version of the content with an image and a text excerpt. In addition, a link to the detail view of the content is created.

On larger screens, the elements of the list are displayed in several columns next to each other. The elements are automatically "fitted" optimally next to each other like bricks in a wall, even if they have different heights.

This teaser can only be used in a list.

List with masonry article teasers

Available element settings

Allows to change the element layout using predefined CSS modifications.

Please note that a specific element may not support all listed modifications.

Determines how the background of the individual lead elements in the list is displayed.

Controls how the teaser is displayed:

Default: This is the default setting.

Reduced: The heading is displayed in a smaller font size.

Minimal: The heading is displayed in an even smaller font size. The margin between the teasers in the list and the padding of the link button is smaller.

Mobile shortened: On smaller screens the heading and the date of the teaser is shown, but the preface text is not shown.

Sets the maximum length (number of letters) of the displayed teaser text, usually generated from the preface.

Special care is taken to ensure the text is cut off after whole word or sentence.

Enter a value of -1 to always output the full text.

If the content contains adjusted teaser data for lists, text entered there as preface will not be cut off.

Controls how many tiles are shown in one row on different screen sizes.

The screen sizes XS, SM, MD, LG, XL and XXL are defined by the Bootstrap grid system.

Controls the pixel width of the spacing between the tiles.

Controls the importance level of the teaser headline in the list elements.

This is relevant for search engines (SEO) and will not change the visual "size" of the teaser headline.

Controls whether, and if yes how the date is displayed.

Instead of the presets, you can also manually enter any format.

If you for example enter "EEE, dd-MM-yy", an output like "Sun, 01-10-17" is generated.

Detailed information about custom formats is available in the documentation about Java date formatting.

Allows to optionally display additional title fields, e.g. the intro field.

Controls how the image is displayed.

The available options vary by element type.

The image format for small screens like smartphones.

Allows you to set the image size based on common formats.

The image will automatically be scaled so that the original pixels are best fitted to the selected target format.

Instead of the presets, you can also manually enter any format. Use "width-height", for example "5-1" for an extreme wide format.

The image format for large desktop screens.

Allows you to set the image size based on common formats.

The image will automatically be scaled so that the original pixels are best fitted to the selected target format.

Instead of the presets, you can also manually enter any format. Use "width-height", for example "5-1" for an extreme wide format.

Adds an effect that is triggered if the mouse is moved over the element.

The effect is disabled for mobile devices.

Controls when to open the detail page in a new window.

Sets an individual label on the button that is used to show a list entry.

If 'none' is set, the button is not shown at all.

If this is not set (left empty), a default text is used that varies by list entry type.

Controls if the copyright information for teaser images is displayed as an overlay.