loading table of contents...

Frontend Developer Manual / Version 2310

Table Of Contents

6.4.11 Example Left Right Banner

The left-right-banner brick provides templates and CSS styles for displaying many content types and commerce objects as a left-right banner. The example is based on the API brick Section 6.3.1, “Default-Teaser”.

Wireframe for left-right-banner

Figure 6.21.  Wireframe for left-right-banner

  1. The shop-now button feature is utilized.

  2. Teaser title and teaser text are shown. For products the list price and (if existing) the offer price is shown.

  3. The call-to-action button feature is utilized.

When used in a container with multiple items the left and right half of the banner alternate.

Wireframe for left-right-banner (alternative)

Figure 6.22.  Wireframe for left-right-banner (alternative)

The banner supports a corresponding view type "left-right" which can be used for placements and collections.

Using the Brick

As shown in the example below, a left-right banner can be displayed by including the corresponding content type with the asLeftRightBanner view.

  <@cm.include self=self view="asLeftRightBanner"/>

The same view is defined for containers (for example, a CMCollection or Placement) to render multiple items among themselves.

Video Behavior

Videos in left-right 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. Left-right banners will not display additional preview pictures linked to the video.

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.