Mercury Dokumentation

Media:The formatter "Image tile media teaser"

The media element allows the integration of videos or audios from external providers like e.g. YouTube or SoundCloud.

The image tile teaser displays a shortened version of the content with a prominent image and a text excerpt that lies on top of the image. In addition, a link to the detail view of the content is generated.

The teaser items can be arranged next to each other in the list like tiles, where the image format set defines the size of the teaser item.

This teaser can only be used in a list.

Back

  • Neonlicht mit dem Schriftzug 'Pop' in Rot-Gelb auf einer bunten Glasscheibe.

    A video in portrait format

  • 100 years “Decker Pitter”
    3:41

    100 years “Decker Pitter”

  • Advent concert in Cologne Cathedral

    Advent concert in Cologne Cathedral

  • Man sieht eine feiernden Menschenmenge auf einer Tanzfläche mit stimmungsvoller Beleuchtung. Im Vordergrund formt eine Person mit den Händen ein Herz.
    0:00
    0:52
  • 0:00
    0:52
Further examples and explanations for lists with image tile article teasers (de)

Available element settings

CSS modification (Select box)

Allows to change the element layout using predefined CSS modifications.

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

Date format (Select/combo box)

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.

Image format (Select/combo box)

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.

Mouse effect (Select box)

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

The effect is disabled for mobile devices.

Image tiles per row (Select box)
Controls how many image tiles are displayed per row on large screens.
Image tile display (Select box)

Controls how the image tiles in the list are varied based on page number.

This applies mostly to larger screens like desktops. On mobile devices, the elements are usually all displayed in the same size.

Tile spacing (Select box)
Controls the pixel width of the spacing between the tiles.
Show preface (Check box)
Controls if the preface text from this content is shown.