loading table of contents...

Frontend Developer Manual / Version 2107

Table Of Contents

6.4.14 Example Portrait Banner

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

Wireframe for portrait-banner on desktop

Figure 6.25.  Wireframe for portrait-banner on desktop

Wireframe for portrait-banner on mobile

Figure 6.26.  Wireframe for portrait-banner on mobile

  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.

The picture associated with a portrait banner fills the upper area. Additional information like title, text and Call-to-Action buttons are placed below the picture.

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

Using the Brick

As shown in the example below, a portrait banner can be displayed by including the corresponding content type with the asPortraitBanner view.

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

The same view is defined for containers (for example, a CMCollection or Placement) to render multiple items inside a grid containing multiple portrait banners per row based on the available screen size

Video Behavior

The portrait banner will render a picture linked to the banner item or an empty placeholder and play the linked video in a popup (only if the popup brick is enabled). The video will automatically start to play as soon as the popup is opened. You can hide the controls and mute or loop the video by setting the corresponding video options in CoreMedia Studio.

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

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