Frontend Developer Manual / Version 2404
Table Of ContentsThe square-banner brick provides templates and CSS styles for displaying many content types and commerce objects as a square banner. The example is based on the API brick Section 6.3.1, “Default-Teaser”.
Teaser title and teaser text are shown on top of the picture.
The call-to-action button feature is utilized and also placed on top of the picture.
The banner supports a corresponding view type "square" which can be used for placements and collections.
Using the Brick
As shown in the example below, a square banner can be displayed by including the corresponding content type with the
asSquareBanner view.
<@cm.include self=self view="asSquareBanner"/>
The same view is defined for containers (for example, a CMCollection or Placement) to render multiple items inside a grid containing multiple square banners per row based on the available screen size.
Video Behavior
Videos in square banners will be displayed inline. You can hide the controls, mute the video or enable autoplay by setting the corresponding video options in CoreMedia Studio. Please note that the autoplay setting will also affect the loop and controls configuration. Loop is enabled for autoplayed videos and disabled otherwise. In addition to that, the video controls will automatically be hidden if autoplay is enabled, no matter the hide controls configuration. Square banners will not display additional preview pictures linked to the video.
